memo , useMemo , useCallback

2500 ワード
React ZeroCho テキストリンク

1. memo

  • 高次素子.
    • を使用して不要なレンダリングを解決

    不要な例


    例をもう一度修正します.
    GrandParentコンポーネントにボタンイベントを追加し、setGrandParentを実行します.
    サブエレメントとしてのParentエレメントとChildエレメントは、変更されていなくても再レンダリングされます.

    この黄色い部分の下に、ボタンを押したときにレンダリングされた構成部品が出力されます.
    親コンポーネントにボタンが1つしかない場合でも、サブコンポーネントは不要なレンダリングを生成することは明らかです.

    解決する


    Parent素子をmemoに組み合わせて処理する.const Parent = memo(()=>{...})
    これにより、memoの親エレメント上のstateの変化により、サブエレメントの不要なレンダリングを防止することができる.

    こうじそし


    パラメータとして構成部品を受け入れ、新しい構成部品を返します.

    2. useMemo


    複雑な関数の結果値を記憶
  • のパフォーマンスを最適化します.
  • メモは記憶の略です.
  • の最初の因数は関数であり、2番目の因数は配列である.
    • 関数は、
  • の2番目の引数に加えられた配列の値が変更された場合にのみ実行されます.
    そうでなければ、以前の値
    • を繰り返し使用します.

    例


    関数が他の状態の変化によって影響されるため、関数が構成部品内で再実行される役割を阻止します.
    他の影響を受けるオブジェクトを指定できます.
    const Lotto = () => {
  const lottoNumbers = useMemo(() => getWinNumbers(), []);
  ....  
}
  • userMemoを使用して、ステータスの変化に応じてレンダリングを再開しても、userMemoのgetWinNumbersを実行しないでください.

    • 3. useCallback


    新しい関数を作成せずに特定の関数を再使用したい場合に使用します.
    useMemoと差が少ない-->usemmoをベースに作られています.useCallback(fn, deps) === useMemo(() => fn, deps)
    CSS-float属性
    2.nest構造-コントローラ、provider