最適化のアイデア最適化には主に 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySql 5.7.20 のインストールとデータおよび my.ini ファイルの構成
>>: NodeサイトのForever+nginx導入方法例
Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...
目次1. オブジェクトの変更検出2. オブジェクトに関する質問配列変更検出3.1 背景3.2 実装I...
問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...
Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...
Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
mysql-5.7.20-winx64.zipインストール手順のないインストール パッケージ: ht...
ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...
v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...
ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用さ...
IE の条件付きコメントは、通常の (X)HTML コメントに対する Microsoft 独自の (...
1. 背景Youzan の各 OLTP データベース インスタンスには、実行時間が特定のしきい値を超...
目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...
前提条件: content="width=750" <meta name=...
目次MySQL 8 の WITH クエリについて学ぶ1. 例3. 練習するMySQL 8 の WIT...