反応ライフサイクルはいくつかの段階に分かれています-フロントエンドQ&A-php.cn

反応ライフサイクルはいくつかの段階に分かれています

WBOY

リリース： 2022-04-29 17:36:08

オリジナル

8982 人が閲覧しました

反応ライフサイクルは 3 つのステージに分かれています: 1. 作成ステージ (初期化ステージとも呼ばれる) は、コンポーネントが初めて DOM ツリーにレンダリングされるときのプロセスを表します。 2. 更新ステージ (初期化ステージとも呼ばれます)。これは存在ステージと呼ばれ、コンポーネントが再レンダリングされるプロセスを表します。 3. アンロードステージ (破棄ステージとも呼ばれます) は、コンポーネントが再レンダリングされるプロセスを表します。コンポーネントが DOM から削除されます。

反応ライフサイクルはいくつかの段階に分かれています

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

反応ライフサイクルはいくつかの段階に分かれています

ライフサイクルの概念は、特に経済、環境、技術、社会などの多くの分野で広く使用されています。この意味は、一般に「ゆりかごから墓場まで」のプロセス全体として理解できます。

Vue と同様に、React のコンポーネントのライフサイクル全体には、データの作成、初期化、テンプレートのコンパイル、Dom のマウント→レンダリングが含まれます。、更新→レンダリング、アンインストールと一連のプロセス

プロセス

ここでは主に、react16.4 以降のライフサイクルについて説明します。これは 3 つの段階に分けることができます:

作成フェーズ
更新フェーズ
アンインストールフェーズ

作成フェーズ

作成フェーズは主に次のライフサイクルメソッドに分かれています:

コンストラクター (英語が飲み込まれてしまうので、なぜ中国語を使用するのかは聞かないでください) 、難しすぎます)
getDerivedStateFromProps
render
##componentDidMount

Constructor

インスタンスプロセス中に自動的に呼び出されるメソッド。メソッド内では、親コンポーネントからの props がスーパーキーワードを通じて取得されます。

このメソッドでは、通常の操作は、状態を初期化するか、このメソッドにメソッドをマウントします。

getDerivedStateFromProps

このメソッドは新しいライフサイクルメソッドであり、静的メソッドであるため、コンポーネントアクセスできません。例

実行タイミング: コンポーネントの作成および更新フェーズ中、プロパティの変更であろうと状態の変更であろうと、各レンダリングメソッドの前にも

# が呼び出されます。最初のパラメータは、これから更新されるパラメータです。props、2 番目のパラメータは、前の状態の状態です。props と state を比較して、いくつかの制限を追加して、無駄な状態の更新を防ぐことができます

このメソッドは次のことを行う必要があります。新しいオブジェクトを新しい状態として返すか、null を返します。状態を更新する必要がないことを示します。

render

クラスコンポーネントがレンダリングのために実装する必要があるメソッド。 DOM 構造を持ち、コンポーネントの状態と prop 属性にアクセスできます

注意: レンダーで setState を設定しないでください。そうしないと、無限ループがトリガーされ、メモリクラッシュが発生します

##componentDidMount

コンポーネントは、実際の DOM ノードにマウントされた後に実行され、レンダリングメソッドで実行されます。その後、実行されます

このメソッドは主に、データ取得、イベント監視、その他の操作を実行するために使用されます

更新ステージ

このステージの関数は主に次のメソッドです:

##getSnapshotBeforeUpdate
componentDidUpdate

このメソッドは上記のように導入されています

ShouldComponentUpdate

コンポーネント自体に再実行が必要かどうかを伝えるために使用されます。現在の props と state に基づいてコンポーネントをレンダリングします。デフォルトでは、true が返されます。

実行タイミング: 新しい props または state に到達したときに呼び出されます。true または false を返して、コンポーネントがレンダリングされているかどうかを示します。更新されたかどうか

#一般に、効率に影響するため、このサイクルメソッドで詳細な比較を実行することはお勧めできません。

同時に、setState を呼び出すことはできません。そうしないと、 update

render

導入を呼び出す無限ループ

getSnapshotBeforeUpdate

この定期関数はレンダリング後に実行されます。DOM 要素はまだ更新されていません。このメソッドによって返されるスナップショット値は、componentDidUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(&#39;#enter getSnapshotBeforeUpdate&#39;);
    return &#39;foo&#39;;
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(&#39;#enter componentDidUpdate snapshot = &#39;, snapshot);
}

ログイン後にコピー

の 3 番目のパラメーターとして渡されます。このメソッドの目的は次のとおりです。コンポーネントが更新される前に、コンポーネントのスクロール位置などの情報を取得します。コンポーネントが更新された後は、この情報に基づいて一部の UI の視覚状態を復元できます

componentDidUpdate

実行タイミング: コンポーネントの更新完了後にトリガーこのメソッドでは、データの取得やDOMの変更など、前後のpropsやstateの変化に基づいて対応する操作を実行できます。

アンロードフェーズ

componentWillUnmount

このメソッドは、登録されたリスニングイベントの一部をクリーンアップするか、コンポーネントの前にサブスクライブされたネットワークリクエストをキャンセルするために使用されます。コンポーネントインスタンスはアンインストールされると、再度マウントされることはなく、再作成のみ可能です。

推奨される学習: 「

react ビデオチュートリアル

」

以上が反応ライフサイクルはいくつかの段階に分かれていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。