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

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

最適化のアイデア

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

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

クラスコンポーネントを使用する場合、使用される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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ReactコンポーネントライブラリにTypeScriptタイプヒントを追加する方法
  • Reactコンポーネントの種類と使用シナリオに関する深い理解
  • Reactの親コンポーネントを介して子コンポーネントにクラス名を渡す実装方法
  • React の機能コンポーネントとクラスコンポーネントの違いをご存知ですか?

<<:  MySql 5.7.20 のインストールとデータおよび my.ini ファイルの構成

>>:  NodeサイトのForever+nginx導入方法例

推薦する

Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明

Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...

Vueデータ変更検出の基本的な実装の簡単な分析

目次1. オブジェクトの変更検出2. オブジェクトに関する質問配列変更検出3.1 背景3.2 実装I...

Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...

mysql 5.7.20 win64 のインストールと設定方法

mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...

Dockerコンテナのネットワークポート設定プロセスの詳細な説明

ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...

HTML に基づいてページを更新せずにフォーム送信を実装する

ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用さ...

IE における条件付きコメントの利点と欠点

IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...

MySQL 最適化のケーススタディ

1. 背景Youzan の各 OLTP データベース インスタンスには、実行時間が特定のしきい値を超...

JS ES6 非同期ソリューション

目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...

MySQL 8.0 WITH クエリの詳細

目次MySQL 8 の WITH クエリについて学ぶ1. 例3. 練習するMySQL 8 の WIT...