[note] React Performance
參考資料
React Performance @ Frontend Master
原則
- 不額外做事總是比做事來的快:如果能透過「調整 component 階層或 state」就解決問題的話,這是第一優先選擇
- 當客觀數據顯示利大於弊時,才考慮用「memoization」
- 有些事情可以延後執行,則可以使用 Suspense API
- 先執行緊急的事情,接著再執行較不緊急的事情,這可以使用「Transition API」
React Developer Tools: Profiler 的使用
Top Bar
- 觀察的重點是 Render duration
Flame graph
點擊每一個 bar 會看到每次 render 時不同的 flame graph,寬度約寬表示所需的時間越久,並且可以看到導致拖這麽久的元素是什麼: