Reactのパフォーマンス
>#WIP
react v18
vercelのきじ
Reactのパフォーマンスについて
>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.
ほとんどの場合、不要なレンダリングの最適化は気にしなくていい
パフォーマンスに役立つReact Hooks
開発モードでの計測
気をつけること
プロファイルの結果は相対的
本番環境のほうが早いが、相対的に遅い部分を見つけることができる
手順
1. React DevToolsを含む全てのChrome拡張を無効にする
2. dev toolの「パフォーマンス」タブでRecordをする
3. プロファイル対象のアクションを実行する
20秒以内に収めること。
4. Recordを停止する
5. Reactイベントが
User Timing ラベルの下にグループ化される本番モードでの計測
気をつけること
ベンチマークテストを行う場合は本番用ビルドで行う
reactのchrome拡張の色が赤だったら開発用、黒だったら本番用
パフォーマンス計測のための手順
ビルド:
$ 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に以下をセット
tsimport * as Perf from 'react-addons-perf';
window.Perf = Perf;計測 ref
1. コンソールで
Perf.start() を実行（計測開始）2. 計測したい操作を行う
3. コンソールで
Perf.stop() を実行（計測終了）4. コンソールで
Perf.printWasted() を実行（結果出力）参考
lighthougeを使う
chrome dev toolsのAuditタブから「Run audits」で計測
参考
Chrome Developer Toolsを使う
React特有のテクニック
長いリストの仮想化 ref
react-virtualized, react-windowなどを用いる
リコンシリエーションを避ける
無駄な再描画を避ける
props,stateインスタンスが変化したとき、その中身の値が全く同じでも再レンダリングされる
選択肢
以下のような場合分けで考える ref
1. propsがないとき
class
FC
React.memoか普通の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などを使えばわかる
対策するためにはuseCallbackを使えばいい
ちょうどそういう話がここに書いている ref
classではそういうものだということはとりあえずわかった
仕組みをちゃんと理解していないのでわからない
公式
本番環境で計測しよう、という話
新し目の記事