Reactのパフォーマンス
react v18
vercelのきじ
MOST OF THE TIME YOU SHOULD NOT BOTHER OPTIMIZING UNNECESSARY RERENDERS. React is VERY fast and there are so many things I can think of for you to do with your time that would be better than optimizing things like this.
ほとんどの場合、不要なレンダリングの最適化は気にしなくていい
開発モードでの計測
気をつけること
プロファイルの結果は相対的
本番環境のほうが早いが、相対的に遅い部分を見つけることができる
手順
1. React DevToolsを含む全てのChrome拡張を無効にする
2. dev toolの「パフォーマンス」タブでRecordをする
3. プロファイル対象のアクションを実行する
20秒以内に収めること。
4. Recordを停止する
5. ReactイベントがUser Timingラベルの下にグループ化される
本番モードでの計測
気をつけること
ベンチマークテストを行う場合は本番用ビルドで行う
reactのchrome拡張の色が赤だったら開発用、黒だったら本番用
https://gyazo.com/95deeb80981e62219b806fa2ca3bcf62 https://gyazo.com/89ef2aaf0a5a3eb6d3e2630cd9b29860
パフォーマンス計測のための手順
ビルド: $ npm run build
その後表示されるコマンドを実行する
yarn global add serve
serve -s build
計測の手法
dev toolsのperformance > Recordを使う
dev toolsのHilight Updatesを使って再描画されてる具合を調べる
ベンチマークテスト
$ npm i -D react-addons-perf @types/react-addons-perf
準備
プロジェクトのhogehogeに以下をセット
code:ts
import * as Perf from 'react-addons-perf';
window.Perf = Perf;
1. コンソールでPerf.start()を実行（計測開始）
2. 計測したい操作を行う
3. コンソールでPerf.stop()を実行（計測終了）
4. コンソールでPerf.printWasted()を実行（結果出力）
参考
lighthougeを使う
chrome dev toolsのAuditタブから「Run audits」で計測
参考
Chrome Developer Toolsを使う
React特有のテクニック
react-virtualized, react-windowなどを用いる
リコンシリエーションを避ける
無駄な再描画を避ける
props,stateインスタンスが変化したとき、その中身の値が全く同じでも再レンダリングされる
選択肢
1. propsがないとき
class
FC
2. propsがshallow equalで対応しきれるとき
class
FC
3. propsがdeep equalで対応する必要があるとき
class
FC
4. 変化しうるプロパティが特定できているとき
class
FC
Listのkeyを適切に付与する
公式のプロファイラ
レンダリング時間を細かく出力してkルエル
rendering観測
参考
books 未読
これの2番目のpropsに直接関数渡すなって話、FCでも言えるのかな？
言える。
useWhyDidYouUpdateなどを使えばわかる
classではそういうものだということはとりあえずわかった
仕組みをちゃんと理解していないのでわからない
公式
本番環境で計測しよう、という話
新し目の記事