useCallback ヘルプ コードはどのようにして高速に実行されるのでしょうか?

Question

useCallback は関数をキャッシュできると言われていますが、その目的はコードの実行を高速化することだと思います。

たとえば、次のような場合:

 const handleChange = (ev) => {
    setMsg(ev.target.value);
  };

次のように変更することもできます:

 const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }、[]);

関数がキャッシュされました。しかし、とにかくコンポーネントを再レンダリングするときにこの関数を作成する必要があるのでしょうか?

テストするために、関数が出力されるように IIFE に変更すると、関数が出力されていることが出力されます。

参照: https://codesandbox.io/s/jolly-nightingale-zxqp8k

したがって、入力ボックスに何かを入力するたびに、コンソールに表示されているように、新しい関数が出力されます。これは、IIFE が毎回実行されることを意味します。また、IIFE でなくても、関数リテラルが毎回関数オブジェクトに変換されることも意味します。では、このヘルプ コードはどのようにして高速に実行されるのでしょうか?

Answer 1

はい、これは正しいです。レンダリングごとに新しい関数が作成され、キャッシュされた関数に置き換えられます。

高速化は、関数の作成ステップを省略したことによるものではなく、他のコードが独自の作業を省略できるためです。毎回同じ関数が渡されると、関連するものは何も変わっていないことがわかるからです。

たとえば、handleChange を useEffect の依存関係配列に渡す必要がある場合、毎回安定した参照を渡すことが非常に重要です。そうしないと、エフェクトが毎回渡されてしまいます。レンダリングされる時間。再実行:

リーリー

または、handleChange がプロップとしてコンポーネントに渡され、コンポーネントが React.memo を使用してレンダリングをスキップしたい場合。レンダリングは、プロパティが変更されていない場合にのみスキップできます:

リーリー