React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア

最適化には主に 2 つの方向があります。

再レンダリングの回数を減らします。 React で最も重い (最も時間のかかる) 部分は、調整 (簡単に言えば diff) です。レンダリングしないと、調整は行われません。
計算量を減らします。主な目的は、繰り返し計算を減らすことです。関数コンポーネントの場合、各レンダリングは最初から関数呼び出しを実行します。

クラスコンポーネントを使用する場合、使用されるReact最適化APIは主としてshouldComponentUpdateとPureComponentです。

では、機能コンポーネントのパフォーマンスを最適化するにはどうすればよいでしょうか?最適化には主に以下の方法が使用されます。

リアクトメモ
コールバックの使用
メモを使う

リアクトメモ

例を見てみましょう:

サブタイトルを変更するためのボタンを親コンポーネントに配置し、子サブコンポーネントを導入します。

ご覧のとおり、サブコンポーネントが初めて登場すると、console.log('I am a subcomponent') が出力されます。

クリックしてサブタイトルを変更すると、子コンポーネントも印刷され、不要なレンダリング時間が繰り返されます。

//親コンポーネント import {useState} from 'react'

「./Child」からChildをインポートします。
定数インデックス = ()=>{
    const [subTitle, setSubTitle] = useState('私はサブタイトルです')
    const サブタイトルを更新 = ()=>{
      setSubTitle('サブタイトルを変更')
    }
    戻る （
      <div>
        <div>機能コンポーネントのパフォーマンス最適化</div>
        <div>{サブタイトル}</div>
        <button onClick={updateSubTitle}>サブタイトルを変更</button>
        <子供/>
      </div>
    );
  }
  
  デフォルトのインデックスをエクスポートします。


//子コンポーネント Child.js
定数子 = ()=>{
    console.log('私は子コンポーネントです')
    戻る （
        <div>私は子コンポーネントです</div>
    ）
}
デフォルトの子をエクスポート

最適化し、React.memoを使用してサブコンポーネントをラップします。

「react」からReactをインポートします。

定数子 = ()=>{
    console.log('私は子コンポーネントです')
    戻る （
        <div>私は子コンポーネントです</div>
    ）
}
デフォルトのReact.memo(Child)をエクスポートする

もう一度観察すると、子サブコンポーネントが繰り返しレンダリングされていないことがわかります。

コールバックの使用

ここで再度変更し、Child サブコンポーネントに onclick イベントを追加して、サブタイトルの変更ボタンをクリックすると、Child サブコンポーネントが再レンダリングされます。これは主に、handlerClick 関数がサブタイトルを変更するときに変更を再レンダリングし、サブコンポーネントが再レンダリングされるためです。

// 親コンポーネント const Index = ()=>{
    const [subTitle, setSubTitle] = useState('私はサブタイトルです')
    const サブタイトルを更新 = ()=>{
      setSubTitle('サブタイトルを変更')
    }
    const ハンドラクリック = ()=>{
      console.log('サブコンポーネントのクリック')
    }
    戻る （
      <div>
        <div>機能コンポーネントのパフォーマンス最適化</div>
        <div>{サブタイトル}</div>
        <button onClick={updateSubTitle}>サブタイトルを変更</button>
        <子の onClick={handlerClick}/>
      </div>
    );
  }

//子サブコンポーネント const Child = (props)=>{
    console.log('私は子コンポーネントです')
    戻る （
        <div>
            <div>私は子コンポーネントです</div>
            <button onClick={props.onClick}>サブコンポーネントボタン</button>
        </div>
    ）
}
デフォルトのReact.memo(Child)をエクスポートする

最適化するには、useCallbackを使用して子コンポーネントのhandlerClick関数をラップし、updateSubTitleをもう一度クリックしてサブタイトルを変更し、子サブコンポーネントが再レンダリングされないことを確認します。

// 親コンポーネント const Index = ()=>{
    const [subTitle, setSubTitle] = useState('私はサブタイトルです')
    const サブタイトルを更新 = ()=>{
      setSubTitle('サブタイトルを変更')
    }
    定数ハンドラクリック = useCallback(()=>{
      console.log('サブコンポーネントのクリック')
    },[])

    戻る （
      <div>
        <div>機能コンポーネントのパフォーマンス最適化</div>
        <div>{サブタイトル}</div>
        <button onClick={updateSubTitle}>サブタイトルを変更</button>
        <子の onClick={handlerClick}/>
      </div>
    );
  }
  
  デフォルトのインデックスをエクスポートします。

useCallbackの使い方は次のとおりです。

定数コールバック = () => {
  何かを実行します(a, b);
}

const memoizedCallback = useCallback(コールバック、[a, b])

関数と依存関係をパラメーターとして useCallback に渡すと、コールバック関数のメモ化されたバージョンが返されます。この memoizedCallback は、依存関係が変更された場合にのみ更新されます。

メモを使う

useMemoは計算結果をキャッシュするために使用されます

例を見てみましょう。前のものをベースに calcCount 計算関数を追加し、updateSubTitle をクリックして字幕を更新します。calcCount が再計算されることがわかります。つまり、レンダリングごとに繰り返し計算が発生します。計算量が多いと、パフォーマンスに大きな影響を与えます。

// 親コンポーネント const Index = ()=>{
    const [subTitle, setSubTitle] = useState('私はサブタイトルです')
    const サブタイトルを更新 = ()=>{
      setSubTitle('サブタイトルを変更')
    }
    定数ハンドラクリック = useCallback(()=>{
      console.log('サブコンポーネントのクリック')
    },[])

    定数calcCount = ()=>{
      
      合計カウントを 0 にする
      (i=0;i<10000;i++とします){
        合計数+=i
      }
      コンソールログ('合計カウント',合計カウント)
      合計数を返す
    }

    定数count = calcCount()

    戻る （
      <div>
        <div>機能コンポーネントのパフォーマンス最適化</div>
        <div>{サブタイトル}</div>
        <button onClick={updateSubTitle}>サブタイトルを変更</button>
        <div>カウント:{count}</div>
        <子の onClick={handlerClick}/>
      </div>
    );
  }

最適化し、useMemo を使用して計算結果をキャッシュします。もう一度 updateSubTitle ボタンをクリックすると、サブタイトルが変更されます。calcCount 関数が計算を繰り返さなくなったことがわかります。

 定数calcCount = ()=>{
      
      合計カウントを 0 にする
      (i=0;i<10000;i++とします){
        合計数+=i
      }
      コンソールログ('合計カウント',合計カウント)
      合計数を返す
    }

    定数count = useMemo(calcCount,[])

最後に、useMemo を盲目的に使用することはできないことに注意してください。特定のシナリオに応じて使用する必要があります。たとえば、データ計算の量が比較的大きい場合は、より適用できます。計算する価値のある通常の計算では、useMemo 自体もパフォーマンスを消費するため、無視できます。盲目的に使用すると逆効果になります。

参考文献

https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA

http://www.ptbird.cn/react-hook-useMemo-purerender.html

React 関数コンポーネントのパフォーマンス最適化に関するこの記事はこれで終わりです。React パフォーマンス最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: