参照の等価性

みなさん、こんにちは、私のブログへようこそ.
皆さんが無事で、このブログが健康であることを願っています❤️.

序章

主なトピック、つまり useCallback と memo から始めるには、参照等価性という用語を理解する必要があります。

参照の等価性簡単に言えば, 2 つのオブジェクトが同じ参照を共有している場合,
それらは等しい.
通常、「===」は、Javascript の 2 つの要素間の参照の等価性をチェックします。

わかった！！
しかし、それと私たちの本題との関係は何ですか?

それはちょっと待って、このブログで分かりやすく伝えましょう。

トピックを始める前に、このブログは、読者が React を十分に理解していることを前提としています。

useCallback

React では、状態が変化するとコンポーネントがレンダリングされ、レンダリングはコンポーネント内ですべてが再作成されることを意味します。
React は DOM を完全に再レンダリングしませんが、DOM の変更された要素のみが再レンダリングされます。

コンポーネント内に関数があるとしましょう

上記のコードにpureFn()は、オブジェクトを返す があります。変わるまでは変わらないversion。したがって、コンポーネントが再レンダリングされるたびに再作成する必要はありません。

それでは、どうすれば React でそのようなことを回避できるのでしょうか?
はい、それを処理する useCallback フックがあります。

それは素晴らしいことです！！！

しかし、それをどのように使用するのですか？

構文は useEffect() フックとまったく同じです
useCallback(fn, dependencyArray)

useCallback() フックは、バージョンが変更されない限り関数を作成しないように React に指示します。

簡単に言えば、useCallbackは内部に関数をキャッシュし、再レンダリングのたびに、バージョンが変更されるまでキャッシュされた関数を返します。

注:は関数の作成を停止しませんが、React はそれを無視し、依存関係の変更がある場合はキャッシュされた関数を返します。useCallback

メモ

useCallbackが関数を記憶するのにどのように役立つかを見てきましたが、完全なコンポーネントについて同様のことはありますか?

子コンポーネントを持つ親コンポーネントがあります。親の状態を更新すると、その状態が子とはまったく関係がない場合でも、親と子の両方が再レンダリングされるとしましょう。

そのため、このような再レンダリングを避けるためmemoに、コンポーネント全体を記憶するのに役立ち、それぞれの props のみが変更されたときに再レンダリングできるように、react を使用しています。

したがって、コンポーネントの不必要な再レンダリングを避けるために、memo

さて、参照等価性に戻りましょう。すでに述べたように、React はレンダリング時にすべてを再作成します。このレンダリング中に、すべての参照が消去され、新しい参照が作成されます。

useCallback()それぞれの関数とmemoコンポーネントの再レンダリングをスキップするよう React に指示します。Memoisationパフォーマンス最適化のためのテクニックです。

参考文献

• 上記のスニペットのコード
• useCallback
• メモ

フロントエンドのさらにエキサイティングなコンテンツについては、ぜひフォローしてください .

どうもありがとうございました。
次回まで、
ハッピーラーニング✍️

Abhishek Kovuri 氏、UI 開発者