nickcrew/react-performance-optimization

react-performance-optimization 是做什麼的？

使用 memoization、程式碼拆分和高效渲染策略的 React 效能最佳化模式。在用於最佳化緩慢的 React 應用程式、減少 bundle 大小或改善處理大型資料集的用戶體驗時使用。

概述

此技能提供一系列 React 效能最佳化模式，幫助開發者識別和解決常見的效能問題。透過應用這些策略，您可以顯著提升應用程式的回應速度和用戶體驗。

主要模式

1. Memoization

• 使用 React.memo 避免不必要的元件重新渲染。
• 使用 useMemo 記憶化昂貴的計算結果。
• 使用 useCallback 穩定函數參考，防止子元件過度重新渲染。

2. 程式碼拆分

• 使用 React.lazy 和 Suspense 實現按需載入元件。
• 動態 import() 語法以拆分 bundle 並減少初始載入時間。
• 結合路由實現基於頁面的程式碼拆分。

3. 高效渲染策略

• 使用虛擬化（例如 react-window 或 react-virtualized）處理大型列表或表格。
• 避免不必要的狀態更新，並將狀態提升到最適當的層級。
• 使用 useTransition 優先處理非緊急更新，保持 UI 回應性。

使用說明

當優化 React 應用程式時，請遵循以下步驟：

1. 使用 React Developer Tools 分析效能瓶頸。
2. 確定頻繁重新渲染的元件。
3. 應用適當的模式（memoization、程式碼拆分或渲染策略）。
4. 測試最佳化後的效果，確保沒有引入回歸。

支援的平台

• Claude Code
• Cursor
• Codex
• 其他支援自訂技能的 AI 代理開發工具

範例

import React, { useMemo, useState } from 'react';

function ExpensiveComponent({ items }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.value - b.value);
  }, [items]);

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default React.memo(ExpensiveComponent);

注意事項

• 避免過度最佳化：只在必要時應用這些模式。
• 測試是關鍵：最佳化前後使用效能工具驗證。
• 保持程式碼可讀性：效能最佳化不應犧牲程式碼的清晰度。