私の React の旅: 26 日目

ライフサイクルメソッドと条件付きレンダリング

今日は、私の React 学習の旅の新たな一歩を示します。すべてライフサイクル メソッドと条件付きレンダリングについてです。 React コンポーネントがどのように誕生し、成長し、最終的に DOM から離れるのかを理解することは、私にとって大きな変化でした。これに、ユーザー インタラクションに基づいてコンテンツを条件付きで表示する機能が追加されると、動的でユーザー フレンドリーなアプリの構築がとても楽しく感じられます。

React 関数コンポーネントのライフサイクル メソッド
ライフサイクルには 3 つのステップがあります:

1.初期ステップ (実装段階):

• コンポーネントが初めてレンダリングされるときに発生します。
空の依存関係配列 ([]) を含む
• useEffect は、このフェーズ中にのみ実行されます。 例:

useEffect(() => {
  console.log("Component mounted");
}, []);

2.更新ステップ:

• 状態またはプロパティが変更されるとトリガーされます。
• React は関数コンポーネントを再実行し、状態を再計算し、更新された props を渡します。
• 変更を処理するには、特定の依存関係を持つ useEffect を使用します。

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

3.終了/アンマウントフェーズ:

• コンポーネントが DOM から削除されるときに発生します。
• useEffect の return 関数にクリーンアップ コードを追加してメモリを解放できます。 例:

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

条件付きレンダリング

この手法は、条件に基づいてコンポーネントや要素を動的にレンダリングする場合に不可欠です。

三項演算子
UserGreeting の例:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

短絡評価
より単純な条件の場合は、&& を使用して、条件が true の場合にのみコンポーネントをレンダリングできます。

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

インライン条件付きスタイル
コンポーネントを動的にスタイル設定することもできます:

const messageStyle = props.isLoggedIn
  ? { 色: "緑" }
  : { 色: "赤" };

<h2> を返す



</h2><p><em>これは日に日に良くなり続けています</em></p>


          

            
        

以上が私の React の旅: 26 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。