ホームページ >ウェブフロントエンド >jsチュートリアル >React のライフサイクルを瞬時に実行
React のライフサイクルを瞬時に実行
- DDDオリジナル
- 2025-01-04 05:36:42686ブラウズ
React ライフサイクルをマスターすることは、プロのようにデバッグするための最初のステップです。
ここでは、すべての仕組みを理解するのに役立つ簡単な 3 分間のガイドをご紹介します。
?有利にスタートするには、無料の 101 React ヒントとコツの本をダウンロードしてください。
React コンポーネントのライフサイクルとは何ですか?
React コンポーネントは人間に似ていますか?
私たちが生まれ、進化し、最終的に死ぬのと同じように、React コンポーネントはライフサイクルに従います。誕生、更新、そして 消滅 🎜>.
このプロセスはコンポーネントのライフサイクルとして知られており、次の 3 つの主要なフェーズがあります。
マウント (別名 Birth): React はコンポーネントを作成し、DOM に追加します。
更新 (別名進化): コンポーネントは状態の変化に応じて変化します。
アンマウント (別名 Dying): React はコンポーネントを削除し、リソースをクリーンアップします。
各フェーズには、レンダリングを最適化しリソースを管理するために React が実行する特定の手順が含まれます。
React コンポーネントのライフサイクルを理解する必要があるのはなぜですか?
React ライフサイクルを理解すると、次のことが役立ちます。
useEffect と useLayoutEffect を使用して、より良いエフェクトを作成します。
useEffect 内で状態を設定するなどの非効率的な行為は避けてください。
クリーンアップによりメモリリークを防ぎます。
パフォーマンスを最適化し、不必要な再レンダリングを回避します。
React コンポーネントのライフサイクルの 3 つのフェーズ
1. マウント: コンポーネントが最初にレンダリングされるとき
マウントは、React がコンポーネントを画面に追加 (マウント) するときに発生します。
マウントのきっかけは何ですか?
root.render(
) を呼び出すとき React がコンポーネントを JSX ツリーに追加し、その親を再レンダリングして新しいコンポーネントを含めるとき。
マウント中に何が起こりますか?
Render: React は、コンポーネント関数 (またはクラス コンポーネントの render メソッド) を呼び出して、React 要素を作成します。 React はフックも初期化します。
DOM ノードの挿入: React は新しい要素で実際の DOM を更新します。このステップは、React が DOM に変更を適用するときの コミットフェーズ 中に発生します。
Set DOM Refs: useRef を使用すると、React は DOM ノードへの参照を設定します。
useLayoutEffect の実行: React は useLayoutEffect 関数を実行します。ここで行われた変更は、ユーザーが視覚的な変化 (ペイント中に発生する) を確認する前に変更が行われるため、目に見えるちらつきは発生しません。
DOM ペイント: ブラウザーは更新された UI をペイントします。
useEffect の実行: 最後に、React は useEffect 関数を実行します。
2. 更新: コンポーネントが再レンダリングされるとき
更新は、React が変更を反映するためにコンポーネントを再レンダリングするときに発生します。
更新のトリガーは何ですか?
状態の更新
更新されたコンテキスト値
親コンポーネントの再レンダリング (コンポーネントがメモ化されていない場合)
など
アップデート中に何が起こりますか?
再レンダリング: React はコンポーネントの出力を再計算します。
調整: React は、新しい React ツリーを以前のツリーと比較して変更を判断します。
変更のコミット: React は変更を反映して DOM を更新します。
DOM 参照の設定解除: 更新中に参照された DOM ノードが削除または置換された場合、React は ref.current を無効化し、非安定 ref コールバックを null で呼び出します。
Cleanup useLayoutEffect: React は、以前の useLayoutEffect からクリーンアップ関数を実行します。
Set DOM Refs: React は、更新された DOM 要素の新しい ref 値を設定します (マウント段階など)。
useLayoutEffect を実行します: React は、マウント段階と同様に useLayoutEffect フックを呼び出します (依存関係が Object.is に従って変更された場合)。
DOM をペイントします: ブラウザーは UI を更新して変更を反映します。
Cleanup useEffect: メモリ リークを防ぐために、前回の useEffect 実行からの関数をクリーンアップします。
-
Run useEffect: React は、更新された useEffect 関数を実行します (依存関係が Object.is に従って変更されている場合)。
3. アンマウント: React がコンポーネントを削除する場合
アンマウントは、React が DOM からコンポーネントを削除し、リソースを解放するときに発生します。
アンマウントのトリガーは何ですか?
コンポーネントは JSX ツリーの一部ではなくなりました
React はその親をアンマウントします。
コンポーネントのキーが変更されました (React は古いインスタンスをアンマウントし、新しいインスタンスをマウントします)。
など
アンマウント中に何が起こりますか?
クリーンアップ関数の実行: React は、useEffect および useLayoutEffect で定義されたクリーンアップ関数を実行します。
DOM 参照の設定を解除します: React は ref.current を無効化し、null で ref コールバックを呼び出します。
DOM ノードの削除: React は、要素に関連付けられた DOM ノードを削除します。
さらに前進するための追加リソース
React ライフサイクルをさらに詳しく知りたい場合は、次の素晴らしいリソースをお勧めします。
-
React ドキュメント
- レンダリングとコミット
- リアクティブエフェクトのライフサイクル
フックを備えた React コンポーネントのタイムライン ❤️
React が再レンダリングを行う理由
React レンダリング動作の (ほぼ) 完全なガイド - 警告: これは非常に長い記事です ?
まとめ
React コンポーネントのライフサイクルを理解すれば、99% の若手フロントエンド開発者よりも先を行くことができます。
これは思ったより簡単です。マウント、更新、アンマウントの 3 つのフェーズのみです。
実際の例を使ってこれらの概念を練習してみましょう:
DOM 測定には useLayoutEffect を使用します。
コンポーネントがアンマウントされるときは、常にエフェクトをクリーンアップします。
これを持っていますか?.
?バグを見つけよう
?思考の糧
それはラップですか?.
コメントを残しますか?最大のポイントを共有します。
「???」を忘れずに入力してください。 React を学習している場合は、私の 101 React ヒントとコツの本を
無料でダウンロードしてください。 このような記事が気に入ったら、私の無料ニュースレター、
FrontendJoyにご参加ください。
毎日のヒントが必要な場合は、X/Twitter または Bluesky で私を見つけてください。 <script> // Detect dark theme var iframe = document.getElementById('tweet-1872251057281372270-743'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872251057281372270&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1872190627729084724-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872190627729084724&theme=dark" } </script>以上がReact のライフサイクルを瞬時に実行の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。