React解読:React Hooks関数のuseCallbackとuseMemo

アメリカのCallbackとアメリカのMemoを一緒に置いたのは、ある意味で、彼らは性能最適化の最初の例であり、彼らも多くの共通性を持っています.まず、classコンポーネントの性能最適化のポイントを振り返ってみます.

呼び出し  setStateは、コンポーネントの再レンダリングをトリガし、前後にかかわらず  state 同じですか?

親コンポーネントが更新され、サブコンポーネントも自動的に

を更新します.
この二つの点の中で、私達は普通使います.  immutable 比較して、同じではないときに呼び出します.  setStateでは、  shouldComponentUpdate で前後を判断します  props 和  state、もし変化がないならば、帰ってきます.  false 更新を阻止します
しかし、Hooksが来たら、shuldComponentUpdate関数がなくなります.前後のpropsが同じかどうかは判断できません.これによって新たにレンダリングされるかどうかは、useffect関数がmountかudateかを区別していません.つまり、コンポーネントの更新毎に複雑な論理が実行され、性能の消耗が非常に大きいことを意味します.
そのため、ヤフー時代には、useCallbackとuseMemoのような性能最適化関数が誕生しました.実は、useCallbackとuseMemoはuseeeeeffectのパラメータと一致しています.useCallback 和  useMemo コンポーネントが最初にレンダリングされた時に実行されます.その後、依存変数が変更された時に再び実行されます.そして、これらの2つのHooksはキャッシュの値を返します.useMemo キャッシュに戻る 変数 キャッシュに戻る 関数
React.memo()
classコンポーネント時代に私達はどうやって最適化したか覚えていますか?はい、そうです.両方の方法:
(1)pureComponentは、propsを浅く比較します.
(2)ShuldComponentUpdateは戻り値に応じて処理して更新するかどうか
function時代には、すでにpurComponentとShuldComponentUpdateというものがなくなっていました.reactはReact.memoのような高次のコンポーネントを提供しています.purComponentと似ていますが、この高次のコンポーネントはclassコンポーネントに適用されるものではなく、functionコンポーネントのみのサービスです.Pure Componentに比べてuseCallback 指定されたReact.memo()をサポートすることができます.   の役割を果たしているので、React.memo()はPureComponentよりも使いやすいです.
使い方:

function MyComponent () {}

function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

上のコードを見てください.実は、使い方は簡単です.Function Component以外では、声明の中で  shouldComponentUpdate 方法で二回判断します.  areEqual どのような違いがありますか?第二のパラメータが渡されない場合、デフォルトはpropsのpropsだけが行われます.最終的にexportのセットは、React.memo()が包装したものです.場合によっては、React.memoの第二パラメータが必要です.
全体としては、React.memo()方法は、コンポーネント全体にre-renderが必要かどうかを覚えておくことが大切です.しかし、ある時は、コンポーネントの一部が欲しいです.re-renderではなく、全体のコンポーネントはre-renderが必要です.どうすればいいですか?yes、use Memoです.
useMemo()微細度性能最適化
使い方:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo()はmemoized値を返します.このmemoized値は依存項(例えば上のa、bが変化したときにのみ再計算されます.)
memoized値が変わらない場合、レンダリングロジックを再起動しません.レンダリングロジックといえば、覚えておくべきはuseMemo()はレンダーの間に実行されるので、追加の副動作ができません.例えば、ネットワーク要求などです.依存配列(上の［a,b］)が提供されていない場合は毎回、memoized値を計算し直します.
useCallback関数

const fnA = useCallback(fnB, [a])

useCallbackの使い方はuseMemoと同じですが、彼らの唯一の違いはuseCallbackがキャッシュされた関数です.
場面:開発において、親のコンポーネントから一つの関数をサブアセンブリに渡す必要があります.もしuseCallbackを使わないなら、親のコンポーネントが更新されたら、新しい関数がサブアセンブリに渡されるということです.毎回の伝達の関数は同じですが、依然として二つの異なる対象です.しかし、useCallbackを使ったら、 useCallbackは依存項によって変化が起こるかどうかを決定し、新しい関数を返すかを決定します.関数内部作用領域も更新されます.
全体として:

は、サブアセンブリが親コンポーネントの値と関数を必要としない場合、 関数を使用してサブアセンブリを包むだけでよい.

機能があれば、サブアセンブリに伝達され、memo

を使用する.

値がサブアセンブリに渡される場合、useCallback

を使用する.

useMemo、useEffect、useMemoは全部クローズドバッグを持参しています.すなわち、各コンポーネントのレンダリングは、現在のコンポーネント関数コンテキストの状態(useCallback、state)をキャプチャするので、これらの3つのヤフーksの実行は、反映されるのもすべて現在の状態であり、それらを使用して前回の状態をキャプチャすることができない.このような状況に対しては、propsを使ってアクセスすべきです.