最適化のアイデア最適化には主に 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導入方法例
序文これまでの Tomcat シリーズの記事を通じて、私のブログを読んでいる学生は Tomcat に...
公式サイトから MySQL をダウンロードしてインストールし、クライアントにログインするにはどうすれ...
数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...
MySQL では、1 つの列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、M...
MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...
Lottie は、Airbnb が開発した iOS、Android、React Native 向けの...
カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...
目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...
目次プロトタイプチェーン図プロトタイピングに必須の知識プロトタイププロパティ(プロトタイプを表示) ...
ウェブサイト体験の分類1. 感覚体験:快適性を重視した視聴覚体験をユーザーに提供します。 2. イン...
innobackupex を使用してバックアップする際に MySQL がサーバーに接続できない場合は...
テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...
MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...