React: クリーンアップ関数はどのくらいの頻度で実行されますか?

状態変数を持つ React コンポーネントは、それらの変数が更新されると再レンダリングをトリガーします。これは予期されたことであり、React の中核機能の 1 つです。さらに、コンポーネントはクリーンアップ機能を提供します。この機能は、コンポーネントが「アンマウント」されるたびにトリガーされます。しかし、このクリーンアップ機能は実際にどれくらいの頻度で実行されるのでしょうか?

このデモで説明するように、クリーンアップ関数には複数のトリガーを設定できますが、一般的なのは、副作用にリンクされている場合の状態変数の更新です。

つまり、React コンポーネントが useEffect を使用し、特定の状態変数に従っている場合、次の例を見てみましょう:

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

カウンターが更新されるたびにクリーンアップ関数が呼び出されます。

状態変数が更新されると、React はコンポーネントを再レンダリングします。つまり、最初にコンポーネントを「削除」してから、再度「レンダリング」する必要があります。仮想 DOM は更新が必要なノードを最適化しますが、ロジック レベルではクリーンアップ関数が呼び出されます。

ほとんどの場合、これは問題なく、想定どおりです。ただし、クリーンアップ関数がイベントのレポートやリスナーの削除などの処理を行っている場合は、クリーンアップ関数が状態変数に基づいて複数回呼び出されるため、それが意図的であることを確認してください。

デモ

デモを見てみましょう。

• 開発者ツールで、コンソールを開きます。
• 2 つのログに気づくでしょう:

Child mounted
Page mounted

これは、ページと子の両方のコンポーネントがレンダリングされたことを意味します。

• 上で共有したスニペットを覚えていると思いますが、useEffect は counter に関連付けられており、最初のボタンをクリックするとインクリメントされます。現時点では、「Increment 0」と表示されているはずです。クリックしてみましょう。

• コンソールに注目して、4 つのログがどのように追加されたかに注目してください:
  

Child unmounted
Page unmounted
Child mounted
Page mounted

状態変数 counter が更新され、counter に関連付けられた useEffect フックが 2 つあるため、それらのクリーンアップ関数が実行されたことを意味します。 Page コンポーネントでは useEffect が状態変数に関連付けられているのに対し、Child コンポーネントでは副作用が prop 変数に関連付けられており、ソースは依然として同じカウンター状態変数であることに注目してください。

さらに、useEffect にリンクされていない別の状態変数を更新する [Flag Off] ボタンが表示されます。これは、このボタンをクリックしてもクリーンアップ機能がトリガーされないことを意味します。

結論

React ではクリーンアップ関数が頻繁に使用されており、特にコンポーネントが「完了」した後に内容を報告するために使用されます。ただし、useEffect を状態変数に結び付ける場合には注意が必要です。デモで見られるように、これにより、状態変数が更新されるたびにクリーンアップ関数が呼び出されますが、これは予期されない可能性があります。

ほとんどの場合、クリーンアップ関数は状態変数なしで useEffect に格納されます。

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

1 つのコンポーネントに複数の useEffect フックがあっても問題ありません。この場合、状態変数に反応するものと、クリーンアップ関数を設定するものを用意できます。

Child mounted
Page mounted

質問に答えると、コンポーネントがアンマウントされるときにクリーンアップ関数が呼び出されます。これは、ユーザーがアプリの別のセクションに移動した場合、または useEffect が状態変数に依存している場合、その状態変数が更新されるたびに N 回呼び出される場合に発生する可能性があります。

以上がReact: クリーンアップ関数はどのくらいの頻度で実行されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。