React Hooks の useEffect (副作用)

useEffectとは何ですか？

useEffectコンポーネントを外部システムと同期できるようにする React Hook です

React でこのフックを使用すると useEffect 、実際には、特定の状況下で定義した副作用関数を実行するように React に指示することになります。この副作用関数は、データの取得、イベントのサブスクライブ、DOM の手動操作など、コンポーネントのレンダリング結果とは関係のない一部の操作を処理できます。

副作用関数は useEffect の最初の引数として渡されます。コンポーネントが更新されて再レンダリングされるたびに、React は実行する必要がある副作用関数があるかどうかを確認します。ただし、副作用関数の実行タイミングを制御したい場合は、依存関係の配列である 2 番目のパラメーターを渡すことができます。依存配列の値が変更された場合にのみ、副作用関数が実行されます。

依存関係配列を空の配列に設定した場合: []、副作用関数はコンポーネントが初めてレンダリングされるときにのみ実行されます。これは、初期化のためのデータのフェッチやイベントのサブスクライブなど、一度だけ実行する必要がある副作用操作に役立ちます。

 // 挂载时执行，页面创建时只执行一次
  useEffect(() => {
    
    
    console.log("建立游戏连接");
  }, []);

依存関係配列に値: が含まれている場合[value]、コンポーネントが最初にレンダリングされるとき、および値が変更されたときに副作用関数が実行されます。これは、入力値に基づいてデータをクエリするなど、特定の値に基づいて操作を実行する場合に便利です。

 // 更新时，当监听的依赖项变动时触发
  useEffect(() => {
    
    
    console.log("当前游戏为：", optionValue);
  }, [optionValue]);

依存関係配列を渡さない場合、コンポーネントが再レンダリングされるたびに副作用関数が実行されます。これは、リアルタイムでのデータのサブスクライブや WebSocket 経由のデータの受信など、リアルタイムの更新を必要とする副作用操作を処理するために使用できます。
破壊時に実行

 // 销毁时
  useEffect(() => {
    
    
    return () => {
    
    
      console.log("已断开连接");
    };
  }, []);

主にライフサイクルフック関数が実行されます。各フック関数では、完全な関数の部分的な効果が実現されます。

関数ベースの実行: 関数のすべての効果がまとめられて達成されます。

開発でより一般的に使用されるのは、コードを統合してまとめる [関数ベースの実行] です。

 useEffect(() => {
    
    
    console.log("1 建立游戏连接：", optionValue, num, str);
    return () => {
    
    
      console.log("2 断开游戏连接：", optionValue);
    };
  }, [optionValue, num, str]);

実行フローは次のとおりです。 1 マウント: 1 2 更新: 21 3 アンマウント: 2

依存関係として使用する必要がある値: Effect で使用される変数値。例: prpos/state/components で作成された変数など。
依存関係として必要のない値: コンポーネントの外部で作成またはインポートされた変数、関数など。

一般に、useEffect は副作用を処理するために React によって提供されるフックです。その主な機能は次のように要約できます。

副作用関数を定義する: これを使用して useEffect、レンダリングに関連しない操作を実行する副作用関数を定義できます。副作用関数には、データのフェッチ、イベントのサブスクライブ、DOM の手動操作などの任意のコードを含めることができます。
副作用関数の実行タイミングを制御します。useEffect 最初のパラメータは副作用関数です。コンポーネントのレンダリングが完了すると、React は副作用関数を実行する必要があるかどうかを確認します。依存関係配列を useEffect 2 番目のパラメーターとして渡すことで、副作用関数をいつ実行するかを制御できます。
コンポーネントのマウント時に副作用関数を実行する: コンポーネントが初めてレンダリングされるときに、副作用関数が 1 回実行されます。これは、データのフェッチやイベントのサブスクライブなど、一部の初期化操作に非常に役立ちます。
コンポーネントが更新されると、副作用関数が再実行されます。依存関係配列内の依存関係が変更されると、副作用関数が再実行されます。これにより、特定の値または状態に基づいて副作用アクションを更新し、コンポーネントとの同期を保つことができます。
コンポーネントのアンマウント時にクリーンアップを実行する: 副作用関数でクリーンアップ関数を返す場合、その関数はコンポーネントがアンマウントされるときに呼び出されます。これは、購読解除、タイマーのクリア、またはその他の必要なクリーンアップ操作の実行に使用できます。

を使用することで useEffect、機能コンポーネントでの副作用操作を処理でき、これらの操作の実行タイミングとクリーンアップを柔軟に制御できます。これにより、コンポーネントの副作用を管理する便利な方法が提供され、コードがより簡潔で保守しやすくなります。

依存関係を使用する場合は注意してください使用する場合は useEffect 、特定の開発シナリオに応じて依存関係の設定に注意する必要があります。一般的な開発シナリオと、それに対応する依存関係に関する考慮事項をいくつか示します。

データ取得と非同期操作:
- 副作用関数がコンポーネント内の状態またはプロパティを使用してデータのフェッチをトリガーする必要がある場合は、それらの関連する状態またはプロパティを依存関係に含めます。
- データの取得がネットワークリクエストなどの非同期操作を通じて行われる場合は、データが更新されるたびに依存関係によってデータの取得が再トリガーされないようにする必要があります。以前のリクエストをキャンセルするために使用できるクリーンアップ関数useEffect 。
イベントをリッスンするか、サブスクライブします。
- 副作用関数がグローバルイベントをリッスンするかサブスクライブする必要がある場合は、関連するイベントまたはサブスクリプションソースを依存関係に含める必要があります。
- クリーンアップ関数では、メモリリークを避けるために、イベントリスナーをキャンセルするかサブスクライブを解除する必要があります。
サードパーティのライブラリまたは外部リソースの使用:
- 副作用関数がサードパーティのライブラリまたは外部リソース (マップ、オーディオなど) を使用する場合は、ドキュメントまたはライブラリで提供される使用法に従って依存関係を設定する必要があります。
- クリーンアップ機能では、リソースのリークやメモリのオーバーフローが発生しないように、リソースの解放または破棄操作が必要です。
コンポーネントの内部状態の更新:
- コンポーネント内の状態が副作用関数で使用されており、状態が更新されたときに副作用関数を再実行したい場合は、これらの状態を依存関係に含める必要があります。
- クロージャ作成の罠を避けるために注意する必要があります。 useCallback そうでない場合は、機能更新を使用して依存関係を正しく設定することができます。
パフォーマンスの最適化:
- 副作用関数が値や状態に依存せず、その影響を無視できる場合は、不要な繰り返し実行を避けるために依存関係を省略できます。
- コンポーネントのマウント時およびアンマウント時に副作用関数を 1 回だけ実行する必要がある場合は、依存関係を空の配列に設定できます []。

特定の開発シナリオと要件に従って、副作用関数を正しく実行するためにどの値と状態が重要な役割を果たすかを慎重に検討し、正確さとパフォーマンスを確保するためにそれに応じて依存関係を設定する必要があります。

React Hooks の useEffect (副作用)

おすすめ