React コンポーネントのライフサイクル


この章では、React コンポーネントのライフサイクルについて説明します。

コンポーネントのライフサイクルは、次の 3 つの状態に分けることができます:

  • マウント: 実際の DOM に挿入

  • 更新: 再レンダリング中

  • アンマウント: 実際の DOM から移動

ライフサイクルのメソッドは次のとおりです:

  • componentWillMount クライアントとサーバーの両方で、レンダリング前に呼び出されます。

  • componentDidMount : 最初のレンダリング後にクライアント側のみで呼び出されます。その後、コンポーネントは対応する DOM 構造を生成し、this.getDOMNode() を通じてアクセスできます。 他の JavaScript フレームワークで使用する場合は、このメソッドで setTimeout、setInterval を呼び出すか、AJAX リクエストを送信できます (外部操作による UI のブロックを防ぐため)。

  • componentWillReceivePropsは、コンポーネントが新しいプロパティを受け取るときに呼び出されます。このメソッドは、レンダリングの初期化時には呼び出されません。

  • shouldComponentUpdate ブール値を返します。コンポーネントが新しいプロパティまたは状態を受け取るときに呼び出されます。初期化中またはforceUpdateの使用中には呼び出されません。
    コンポーネントを更新する必要がないことを確認する場合に使用できます。

  • componentWillUpdate は、コンポーネントが新しい props または state を受け取ったがまだレンダリングされていないときに呼び出されます。初期化中には呼び出されません。

  • componentDidUpdate コンポーネントの更新が完了した直後に呼び出されます。初期化中には呼び出されません。

  • componentWillUnmount は、コンポーネントが DOM から削除されるとすぐに呼び出されます。

これらの方法の詳細な手順については、公式ドキュメントを参照してください。

次の例では、Hello コンポーネントがロードされた後に、componentDidMount メソッドを通じてタイマーを設定し、100 ミリ秒ごとにコンポーネントの透明度をリセットして、再レンダリングします。 「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

次のインスタンスは

state
に初期化され、
setNewnumber
はstateを更新するために使用されます。すべてのライフサイクルは

Content

コンポーネント内にあります。

インスタンス

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="example"></div>

    <script type="text/babel">
      var Hello = React.createClass({
        getInitialState: function () {
          return {
            opacity: 1.0
          };
        },

        componentDidMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
          }.bind(this), 100);
        },

        render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });

      ReactDOM.render(
        <Hello name="world"/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

←
→