React 最佳實務

React 最佳實務 是做什麼的？

React 應用程式的全面效能優化指南。包含 37 條規則，橫跨 7 個類別，並按影響力排列優先順序。

依優先級排列的規則類別

優先級	類別	影響力	前綴
1	消除瀑布式請求	關鍵	async-
2	捆綁大小優化	關鍵	bundle-
3	客戶端資料擷取	中高	client-
4	重新渲染優化	中	rerender-
5	渲染效能	中	rendering-
6	JavaScript 效能	低中	js-
7	進階模式	低	advanced-

快速參考

1. 消除瀑布式請求 (關鍵)

• async-defer-await - 將 await 移到實際使用的分支中
• async-parallel - 針對獨立操作使用 Promise.all()/allSettled()

2. 捆綁大小優化 (關鍵)

• bundle-dynamic-imports - 對重量級元件使用 React.lazy()
• bundle-defer-third-party - 按需載入分析/記錄功能
• bundle-conditional - 僅在功能啟用時載入模組
• bundle-preload - 在懸停/聚焦時預先載入以提升感知速度

3. 客戶端資料擷取 (中高)

• client-query-dedup - 使用 TanStack Query 自動去除重複請求
• client-event-listeners - 去除全域事件監聽器的重複
• client-passive-event-listeners - 對滾動效能使用被動監聽器
• client-localstorage-schema - 為 localStorage 資料設定版本並最小化資料量

4. 重新渲染優化 (中)

• rerender-defer-reads - 不要訂閱僅在回呼中使用的狀態
• rerender-memo - 將耗時的工作提取到已記憶化的元件中
• rerender-dependencies - 在 Effect 中使用基本型別依賴項
• rerender-derived-state - 訂閱衍生出的布林值，而非原始數值
• rerender-functional-setstate - 對穩定的回呼使用函數式 setState
• rerender-lazy-state-init - 對耗費資源的初始值，傳遞函數給 useState
• rerender-transitions - 對非緊急的更新使用 startTransition

5. 渲染效能 (中)

• rendering-animate-svg-wrapper - 動畫化 div 包裝層，而非 SVG 元素本身
• rendering-content-visibility - 對長列表使用 content-visibility
• rendering-hoist-jsx - 將靜態 JSX 提取到元件外部
• rendering-svg-precision - 減少 SVG 座標的精確度
• rendering-activity - 使用 Activity 元件來控制顯示/隱藏
• rendering-conditional-render - 使用三元運算子而非 && 進行條件渲染

6. JavaScript 效能 (低中)

• js-batch-dom-css - 透過 class 或 cssText 批量處理 CSS 變更
• js-index-maps - 為重複查詢建立 Map
• js-cache-property-access - 在迴圈中快取物件屬性
• js-cache-function-results - 在模組層級的 Map 中快取函數結果
• js-cache-storage - 快取 localStorage/sessionStorage 的讀取結果
• js-combine-iterations - 將多次 filter/map 合併為一次 loop
• js-length-check-first - 在進行昂貴的比較前，先檢查陣列長度
• js-early-exit - 從函數中提前返回
• js-hoist-regexp - 將 RegExp 的建立提升到迴圈外部
• js-min-max-loop - 使用迴圈尋找最小值/最大值，而非使用 sort
• js-set-map-lookups - 使用 Set/Map 實現 O(1) 查詢
• js-tosorted-immutable - 使用 toSorted() 來維持不變性

7. 進階模式 (低)

• advanced-event-handler-refs - 將事件處理器儲存在 refs 中
• advanced-use-latest - 使用 useLatest 實現穩定的回呼 refs

如何使用

references/ 目錄中的每個規則檔案都包含：解釋、不正確/正確的程式碼範例以及上下文。請根據需要閱讀個別檔案。