前言
React 作為現代前端開發的主流函式庫之一,強調 UI 的組件化與狀態驅動式渲染。然而,隨著應用規模擴大與資料變得動態頻繁,React 應用可能出現重新渲染過多、載入過慢或記憶體占用過高等問題,影響使用者體驗與開發效率。為此,瞭解與掌握 React 的效能優化技巧,成為中高階開發者的重要功課。
本篇筆記將介紹 React 效能優化的核心原則與常見實作方式,搭配簡單的程式碼範例說明實際操作,協助你建立清晰的優化思維與實作經驗。
重點摘要
避免不必要的重新渲染
- 使用
React.memo
包裹純函式組件 - 適當使用
useMemo
與useCallback
記憶運算結果或函式引用
- 使用
Lazy loading(Code Splitting)
- 使用
React.lazy
與Suspense
實現組件按需載入
- 使用
列表渲染優化
- 提供穩定的
key
,避免 diff 錯誤導致重繪 - 處理大量資料時可結合虛擬化工具(如
react-window
)
- 提供穩定的
狀態管理與邏輯分離
- 將全域狀態與 UI 狀態分離,減少重渲染範圍
- 減少 props 傳遞鏈,避免深層組件無謂更新
避免 inline 宣告與函式
- 每次 render 都會產生新函式或物件,導致子組件重新渲染
效能分析與工具
- 使用 React DevTools 的 Profiler 模組分析 render 開銷
- 善用 Chrome DevTools、Lighthouse 等協助調校效能
實際範例
1. 避免不必要的渲染:使用 React.memo
// 子元件 |
若未使用 React.memo
,即使 todo
資料未變,只要父層重新 render,TodoItem
就會跟著重新 render。使用 React.memo
可避免這種不必要的重新渲染。
2. 函式記憶:使用 useCallback
const onToggle = useCallback((id) => { |
如果 onToggle
每次 render 都重新宣告,會導致 React.memo
判斷 props 改變,從而重新渲染子元件。使用 useCallback
可以保留函式參考的一致性。
3. 虛擬滾動列表:使用 react-window
import { FixedSizeList as List } from 'react-window'; |
react-window
提供虛擬滾動的能力,只 render 可視範圍內的項目,大幅減少 DOM 結點,提高大數據列表效能。
4. 懶載入元件:使用 React.lazy
import React, { Suspense } from 'react'; |
將大型組件分割成懶載入模組,可避免初次載入體積過大,提升頁面初始加載速度。
5. 使用 Profiler 分析效能瓶頸
React DevTools 提供 Profiler 模組,可追蹤各元件 render 時間與次數,有助於識別過度渲染或效能低落的元件。
import { Profiler } from 'react'; |
結語
React 效能優化並非一蹴可幾,而是需隨著應用規模與需求不斷調整與改善的過程。透過理解 Virtual DOM 的運作原理、掌握各種 Hook 的特性,以及活用分析工具,我們可以更有策略地針對效能瓶頸逐步優化,打造流暢且可維護的使用者體驗。
建議從小型優化(如 React.memo
、useCallback
)著手,並逐步引入懶載入與虛擬化等進階技巧,讓 React 應用能夠隨著功能擴展持續保持高效能。
如果你對特定效能問題有興趣,例如圖片載入優化、CSR vs SSR 效能比較等,也可以再深入探討不同的進階主題。