React のライフサイクルを瞬時に実行

React ライフサイクルをマスターすることは、プロのようにデバッグするための最初のステップです。

ここでは、すべての仕組みを理解するのに役立つ簡単な 3 分間のガイドをご紹介します。

?有利にスタートするには、無料の 101 React ヒントとコツの本をダウンロードしてください。

React コンポーネントのライフサイクルとは何ですか?

React コンポーネントは人間に似ていますか?

私たちが生まれ、進化し、最終的に死ぬのと同じように、React コンポーネントはライフサイクルに従います。誕生、更新、そして 消滅 🎜>.

このプロセスはコンポーネントのライフサイクルとして知られており、次の 3 つの主要なフェーズがあります。

• マウント (別名 Birth): React はコンポーネントを作成し、DOM に追加します。

• 更新 (別名進化): コンポーネントは状態の変化に応じて変化します。

• アンマウント (別名 Dying): React はコンポーネントを削除し、リソースをクリーンアップします。

各フェーズには、レンダリングを最適化しリソースを管理するために React が実行する特定の手順が含まれます。

React コンポーネントのライフサイクルと人間のライフサイクルの類似

React コンポーネントのライフサイクルを理解する必要があるのはなぜですか?

React ライフサイクルを理解すると、次のことが役立ちます。

• useEffect と useLayoutEffect を使用して、より良いエフェクトを作成します。

• useEffect 内で状態を設定するなどの非効率的な行為は避けてください。

• クリーンアップによりメモリリークを防ぎます。

• パフォーマンスを最適化し、不必要な再レンダリングを回避します。

React コンポーネントのライフサイクルの 3 つのフェーズ

フックを備えた React コンポーネントのタイムライン。出典: https://julesblom.com/writing/react-hook-component-timeline

1. マウント: コンポーネントが最初にレンダリングされるとき

マウントは、React がコンポーネントを画面に追加 (マウント) するときに発生します。

マウントのきっかけは何ですか?

• root.render() を呼び出すとき

• React がコンポーネントを JSX ツリーに追加し、その親を再レンダリングして新しいコンポーネントを含めるとき。

マウント中に何が起こりますか?

1. Render: React は、コンポーネント関数 (またはクラス コンポーネントの render メソッド) を呼び出して、React 要素を作成します。 React はフックも初期化します。

2. DOM ノードの挿入: React は新しい要素で実際の DOM を更新します。このステップは、React が DOM に変更を適用するときの コミットフェーズ 中に発生します。

3. Set DOM Refs: useRef を使用すると、React は DOM ノードへの参照を設定します。

4. useLayoutEffect の実行: React は useLayoutEffect 関数を実行します。ここで行われた変更は、ユーザーが視覚的な変化 (ペイント中に発生する) を確認する前に変更が行われるため、目に見えるちらつきは発生しません。

5. DOM ペイント: ブラウザーは更新された UI をペイントします。

6. useEffect の実行: 最後に、React は useEffect 関数を実行します。

---

2. 更新: コンポーネントが再レンダリングされるとき

更新は、React が変更を反映するためにコンポーネントを再レンダリングするときに発生します。

更新のトリガーは何ですか?

• 状態の更新

• 更新されたコンテキスト値

• 親コンポーネントの再レンダリング (コンポーネントがメモ化されていない場合)

• など

アップデート中に何が起こりますか?

1. 再レンダリング: React はコンポーネントの出力を再計算します。

2. 調整: React は、新しい React ツリーを以前のツリーと比較して変更を判断します。

3. 変更のコミット: React は変更を反映して DOM を更新します。

4. DOM 参照の設定解除: 更新中に参照された DOM ノードが削除または置換された場合、React は ref.current を無効化し、非安定 ref コールバックを null で呼び出します。

5. Cleanup useLayoutEffect: React は、以前の useLayoutEffect からクリーンアップ関数を実行します。

6. Set DOM Refs: React は、更新された DOM 要素の新しい ref 値を設定します (マウント段階など)。

7. useLayoutEffect を実行します: React は、マウント段階と同様に useLayoutEffect フックを呼び出します (依存関係が Object.is に従って変更された場合)。

8. DOM をペイントします: ブラウザーは UI を更新して変更を反映します。

9. Cleanup useEffect: メモリ リークを防ぐために、前回の useEffect 実行からの関数をクリーンアップします。

10. 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 サイトの他の関連記事を参照してください。