Reactコンポーネントのライフサイクルの詳細な説明

Reactコンポーネントのライフサイクルの詳細な説明

1.ライフサイクルとは何か

コンポーネントのライフサイクルは、人が生まれ、年を取り、病気になり、死ぬのと同じように、また自然界にも変化があるのと同じように、React の動作プロセスです。Web ページ内のすべてのコンポーネントは、生物と同じように作成、更新、削除されます。

Reactコンポーネントのライフサイクルは3つのプロセスに分けられます

  • マウントプロセス: DOM ツリー内のコンポーネントを初めてレンダリングするプロセスです。
  • 更新プロセス: コンポーネントが再レンダリングされるプロセス。
  • アンマウント プロセス: DOM からコンポーネントを削除するプロセス。

2. 読み込みプロセス

次の関数を順番に呼び出します: constructor、getInitialState、getDefaultProps、componentWillMount、render、componentDidMount。

1.コンストラクタ

これは ES6 のコンストラクターであり、コンポーネント クラスのインスタンスを作成します。このプロセスでは、状態の初期化とメンバー関数の this 環境のバインドという 2 つの手順が必要です。

2. レンダリング

レンダリングは、React コンポーネントの中で最も重要な機能です。これは、React で唯一無視できない関数です。レンダリング関数では、親要素は 1 つしか存在できません。 render 関数は純粋な関数です。実際にレンダリング アクションを実行するわけではありません。JSX で記述された構造にすぎません。最終的には、React がレンダリング プロセスを実行します。render 関数では操作は行われません。ページの記述は、this.state と this.props の戻り結果に完全に依存します。render で this.setState を呼び出すことはできません。

  • これを非常に鮮明に要約する式があります: UI=render(data)

3. コンポーネントWillMountとコンポーネントDidMount

これら 2 つの関数は、それぞれレンダリングの前と後に実行されます。このプロセスは通常、ブラウザ側でのみ呼び出すことができるため、ここでは非同期データを取得し、componentDidMount が呼び出されると、コンポーネントが DOM ツリーに読み込まれます。

3. 更新プロセス

簡単に言えば、 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

1. コンポーネントはプロパティを受け取ります(次のプロパティ)

props が変更されたときだけ呼び出されるわけではありません。実際、親コンポーネントの render 関数が呼び出される限り、render でレンダリングされる子コンポーネントは更新されます。親コンポーネントから子コンポーネントに渡される props が変更されたかどうかに関係なく、子コンポーネントの componentWillReceiveProps プロセスがトリガーされます。ただし、この関数は新しい props の値に基づいて内部状態を更新するかどうかを計算するのに適しているため、this.setState メソッドのトリガー プロセスはこの関数を呼び出しません。

2. コンポーネントを更新する必要があります(nextProps、nextState)

この関数の重要性はレンダリングに次ぐものです。レンダリング関数はレンダリングするものを決定し、shouldComponentUpdate はレンダリングする必要がないものを決定します。どちらも関数を返す必要があります。このプロセスにより、パフォーマンスが向上し、不要な再レンダリング プロセスが無視されます。

3. コンポーネントWillUpdateとコンポーネントDidUpdate

読み込みプロセスとは異なり、ここでのcomponentDidUpdateはブラウザ側とサーバー側の両方で実行できます。

4. レンダリングをトリガーする

React では、レンダリングをトリガーするパスが 4 つあります。

以下は、shouldComponentUpdate がデフォルトで true を返すことを前提としています。

(1)初期レンダリング

(2) this.setState を呼び出します (すべての setState 呼び出しがレンダリングをトリガーするわけではありません。React は操作をマージして一度にすべてをレンダリングする場合があります)。

(3)親コンポーネントが更新されます(通常はpropsが変更されますが、propsが変更されていない場合や親コンポーネントと子コンポーネント間でデータの交換がない場合でも、レンダリングがトリガーされます)。

(4)this.forceUpdateを呼び出します。

ここに画像の説明を挿入

注: shouldComponentUpdate で false を返すと、更新パスを早期に終了できます。

4. アンインストールのプロセス

実際に使われることはほとんどありません。ここにはcomponentWillUnmountが1つだけあります。一般的には、componentDidMountに登録されたイベントをここで削除する必要があります。

5. ライフサイクルプロセス

1. レンダリングを初期化して初めて表示する: ReactDOM.render()

  • constructor():オブジェクトを作成し、状態を初期化する
  • componentWillMount() :挿入されるコールバック
  • render() :仮想DOMコールバックを挿入するために使用される
  • componentDidMount() :コールバックが挿入されました

2. 毎回状態を更新する: this.setState()

  • componentWillUpdate() : 更新されるコールバック
  • render() : 更新(再レンダリング)
  • componentDidUpdate() : 更新されたコールバック

3. コンポーネントを削除する: ReactDOM.unmountComponentAtNode(containerDom)

  • componentWillUnmount(): コンポーネントは削除されます。

6. 例

 <div id='コンテナ'></div>
    <script type="text/babel">
        クラスLifeCycleはReact.Componentを拡張します。
            コンストラクタ(props) {
                スーパー(小道具);
                alert("初期レンダリング");
                アラート("コンストラクタ");
                this.state = {str: "hello"};
            }
             コンポーネントマウント() {
                アラート("コンポーネントがマウントされます");
            }
            コンポーネントマウント() {
                アラート("コンポーネントがマウントされました");
            }
            コンポーネントはプロパティを受け取ります(次のプロパティ) {
                アラート("コンポーネントがプロパティを受け取る");
            }
            コンポーネント更新() {
                アラート("コンポーネントを更新する必要があります");
                return true; // trueを返すことを忘れないでください
            }
             コンポーネントWillUpdate() {
                アラート("コンポーネントが更新されます");
            }
            コンポーネントを更新しました() {
                アラート("コンポーネントが更新されました");
            }
            コンポーネントのマウントを解除します(){
                アラート("コンポーネントがマウント解除されます");
            }
            状態を設定する() {
                s = "hello"とします。
                (this.state.str === s)の場合{
                    s = "こんにちは";
                }
                this.setState({
                    str: s
                });
            }
            強制更新() {
                this.forceUpdate();
            }
            与える() {
                アラート("レンダリング");
                戻る(
                    <div>
                        <span>{"プロパティ:"><h2>{parseInt(this.props.num)}</h2></span>
                        <br />
                        <span>{"州:"><h2>{this.state.str}</h2></span>
                    </div>
                );
            }
        }
        クラスコンテナはReact.Componentを拡張します。
            コンストラクタ(props) {
                スーパー(小道具);
                この状態 = {
                    数値: Math.random() * 100
                };
            }
            プロパティの変更(){
                this.setState({
                    数値: Math.random() * 100
                });
            }
            ライフサイクルステートを設定する() {
                this.refs.rLifeCycle.setTheState();
            }
            強制ライフサイクル更新() {
                this.refs.rLifeCycle.forceItUpdate();
            }
            アンマウントライフサイクル() {
                // ここで親コンポーネントをアンマウントすると、子コンポーネントもアンマウントされます ReactDOM.unmountComponentAtNode(document.getElementById("container"));
            }
            親強制更新() {
                this.forceUpdate();
            }
            与える() {
                戻る (
                    <div>
                        <a href="javascript:;" onClick={this.propsChange.bind(this)}>propsChange</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.setLifeCycleState.bind(this)}>状態の設定</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.forceLifeCycleUpdate.bind(this)}>強制更新</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.unmountLifeCycle.bind(this)}>アンマウント</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
                        <ライフサイクル ref="rLifeCycle" num={this.state.num}></ライフサイクル>
                    </div>
                );
            }
        }
        ReactDOM.render() は、
            <コンテナ></コンテナ>,
            document.getElementById('コンテナ')
        );
    </スクリプト>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • React クラスコンポーネントのライフサイクルと実行順序
  • Reactコンポーネントのライフサイクルの例
  • React Nativeのコンポーネントのライフサイクルについての簡単な説明
  • Reactコンポーネントのライフサイクルの詳細な説明
  • 一般的な js-react コンポーネントのライフサイクル

<<:  DockerがElasticsearch7.xを起動してエラーを報告する問題を解決する

>>:  Markodwnによるタイトル配置による同期スクロールのアイデアの詳細な説明

推薦する

jQueryはフォーム検証機能を実装します

jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

Centos での TCPWrappers アクセス制御の実装

1. TCP ラッパーの概要TCP Wrappers は TCP サービス プログラムを「ラップ」し...

spring-boot と docker-java に基づいて Docker コンテナの動的な管理と監視を実装します [完全なソース コードのダウンロード付き]

Docker入門Docker はオープンソースのアプリケーション コンテナ エンジンです。従来の仮...

sqlmap インジェクションの詳細なグラフィック説明

目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...

MySQL の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....

MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...

仮想マシンに Linux rhel7.3 オペレーティング システムをインストールする (具体的な手順)

仮想化ソフトウェアをインストールする仮想マシンにオペレーティング システムをインストールする前に、ホ...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...

Nginx proxy_redirect の使用方法の詳細な説明

今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...

Linux での Nginx アンチホットリンクと最適化の実装コード

バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...

VMware ESXi サーバー仮想化クラスター

目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...

MySQL ログインおよび終了コマンドの形式

mysql ログインのコマンド形式は次のとおりです。 mysql -h [hostip] -u [ユ...

HTML 要素 noscript の使用の紹介

noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...