React useEffect の理解と使用

Reactでは、本来はDOMをレンダリングしてページに表示したいだけなのですが、DOM以外にもデータがあり、このデータを外部データソースから取得する必要があります。「外部データソースを取得する」という処理が副作用です。

useEffect の使い方については、公式サイトに掲載されている例を参考にしてください。ここでは主に useEffect の使用時に発生する問題についてまとめます。

繰り返しレンダリングループを避ける

useEffect を使用して配列を第 2 パラメータとして受け取り、第 2 パラメータを依存関係として使用します。DOM がレンダリングされ、副作用関数が実行されるたびに、依存関係のレンダリング前後の値が一致しているかどうかを確認するための浅い比較が行われます。一致していない場合は副作用が実行され、一致していない場合は実行されません。依存関係が空の配列 [] の場合、つまり比較する変数が渡されていない場合は、比較結果は常に変更されず、副作用ロジックは 1 回しか実行されません。

使用効果(() => {
  タイムアウトを設定する(() => {    
        setCounter(カウンター + 1);  
    }, 300)
}, []);

さらに、更新ボタンをクリックして外部データを取得したいが、無限ループを引き起こしたくない場合は、変数を「スイッチ」として使用して、DOM の循環レンダリングを回避しながら目的を達成できます。

アニメ絵を描くのは面倒なので注釈を読んで想像力を働かせてください😂

function App() { const [count, setCount] = useState(0); const [loading, setLoading] = useState(true); // スイッチとしてロードします useEffect(() => { if (loading) { // これはロードが true の場合にのみ実行されることに注意してください setTimeout(() => { setCount(count + 1); setLoading(!loading); // ロード値を変更します }); } }, [loading]); // ここではロードが依存関係として使用されます
  // 最初の DOM レンダリングが完了した後、loading が true になり、副作用関数が実行され、count 値が 1 になり、loading が false になります。// state の値が変更されるため、更新され、コンポーネントが再度レンダリングされますが、この時点では loading が false であり、setTimeout は実行されません。
  // ループを回避する // [更新] をクリックすると、読み込みが false から true に変わり、関数は更新を実行します
  // DOM が更新された後、useEffect が実行されます。loading がすでに true になっているため、副作用関数が実行でき、count が 1 から 2 に変わります。
  // ロードすると true から false に変わります。 。 。
  return ( <div> <h3>{count}</h3> <button onClick={() => { setLoading(true); }} > 更新 </button> </div> );}

副作用の除去について

useEffect は副作用をクリーンアップする関数を返すことができます。

  使用効果(() => {    
    ChatAPI.subscribeToFriendStatus(props.id、handleStatusChange);  
    関数クリア(){
        ChatAPI.unsubscribeFromFriendStatus(props.id、handleStatusChange);
    }  
    クリアを返す;
});

これには、useEffect の実行と破棄のプロセスが含まれます。

props.id = 1 を渡す
コンポーネントレンダリング
DOMレンダリングが完了し、副作用関数が実行され、clear副作用関数clearが返されます。名前はclear1です。
props.id=2 を渡す
コンポーネントレンダリング
DOMレンダリングが完了したら、clear1を実行します。
副作用関数が実行され、clear2という名前の別のクリア関数が返されます。
コンポーネントが破壊され、clear2 が実行されました

このことから、副作用クリーンアップ関数の特性を推測できます。

各副作用の実行はクリーンアップ関数を返す
クリーンアップ関数は、次の副作用関数が実行される前に実行されます（DOMレンダリングが完了した後）。
コンポーネントの破棄ではクリーンアップ関数も実行される

出力されたカウント値から、次の副作用関数が実行される前にクリア関数が実行されることもわかります。つまり、クリア関数のカウント値は最後のキャッシュのカウント値です。

さらに考えてみると、clear1 を実行すると props.id にアクセスされるので、この id の値は 1 でしょうか、それとも 2 でしょうか?

これにはクロージャの概念が関係します。useEffect は関数を返し、この関数は実行時にクロージャを生成するからです。クロージャの定義によれば、返された clear 関数は自身のスコープ外の変数にアクセスできます。コンポーネントが初めてレンダリングされるときに id=1 が渡され、clear 関数の props.id の値は 1 になります。

以上がReact useEffectの理解と使用に関する詳細な内容です。React useEffectについてさらに詳しく知りたい方は、123WORDPRESS.COMの他の関連記事もぜひご覧ください！

以下もご興味があるかもしれません: