React での依存関係のキャッシュと useCallback の参照について理解する

Question

useCallback フックは関数参照のみをキャッシュしますか、それとも関数自体の値/結果もキャッシュしますか?また、依存関係配列で ref を使用すると、コンポーネントの ref と同様に実際に何らかの効果がありますか?そうでない場合、ref 値への変更が適切な効果をもたらすことを確認する方法はありますか?

当初は関数参照のみがキャッシュされると思っていましたが、ある記事を読んで useCallback(fn, deps) が useMemo(() => fn, deps) と同等であることを知り、よくわかりません。これが事実である場合 これは実際に当てはまります。また、コンポーネントのrefを依存関係(Video.jsやreact-slickなど)として使ってみましたが、他の依存関係に比べてあまり影響がないと思います。

Answer 1

はい、useCallback の目的は、指定した依存関係が変更されない限り、関数がレンダリング間でその参照を保持できるようにすることです。

たとえば、関数 f(x,y)=>x y がある場合、空の依存関係配列 useCallback((x,y)=>x y, [ ])、この関数は決して変更されません。出力を解析するために引数のみを使用するため、常に一貫した動作が生成されます。ただし、別の関数 h と別の外部値 z があり、h が h(x ,y)= として定義されている場合は、状況が変わる可能性があります。 >x y z の場合、z が変更された場合に useCallback から返される値になるように、依存関係に z を含める必要があります。関数には新しいリファレンス。

したがって、useCallback の目的は、通常、子コンポーネントの再レンダリングをトリガーしないように関数を渡すとき、または子コンポーネントの関数として関数を使用するときです useEffect 宣言の依存関係。関数内の操作に負荷がかかる場合、useCallback はあまり役に立たないため、結果を個別に記憶する必要があります。

ref については、依存関係に ref を含めても何も起こらず、配列が空のようなものだと思います。おそらく ref が状態に保存されていれば役立つかもしれませんが、実際にはわかりません。

ここに リンクがあります https://stackblitz.com/edit/stackblitz-starters-wwyw9f?file=src/App.tsx には、役に立つかもしれないいくつかの例があります。

削除される可能性がある場合は、上から貼り付けることもできます。

リーリー

お役に立てば幸いです