📝  《React性能优化完全手册：从useMemo到并发模式》

// 典型错误示例：内联对象导致子组件无效更新
<ChildComponent style={{ color: 'red' }} /> ✅ 改用useMemo缓存

// 正确用法：仅当依赖项变化时重新计算
const filteredList = useMemo(() => 
  bigData.filter(item => item.score > 80), 
[bigData]); // ✅ 避免每次渲染重复计算

// 最佳实践：Memo + 属性冻结
const ExpensiveComponent = React.memo(({ config }) => {
  /* 渲染逻辑 */
}, (prev, next) => {
  return shallowCompare(prev.config, next.config); // ✅ 自定义比较
});

// 启用并发模式（React 18+）
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(<App />);

const [filter, setFilter] = useState('');
const [isPending, startTransition] = useTransition();

const handleSearch = (value) => {
  startTransition(() => { 
    setFilter(value); // ✅ 用户输入时保持输入框响应
  });
};

return (
  <div>
    <input onChange={(e) => handleSearch(e.target.value)} />
    {isPending && <Spinner />}
    <ResultsList filter={filter} />
  </div>
);

const [searchText, setSearchText] = useState('');
const deferredText = useDeferredValue(searchText); // ✅ 延迟派生值

// 大数据量列表自动获得防抖效果
<HeavyList filter={deferredText} />

// 实现模块懒加载
const ProductDetails = React.lazy(() => import('./ProductDetails'));

// 结合路由使用
<Route path="/details" element={
  <Suspense fallback={<Skeleton height={400} />}>
    <ProductDetails />
  </Suspense>
} />

// 正确做法：useEffect清理函数
useEffect(() => {
  const timer = setInterval(updateData, 5000);
  return () => clearInterval(timer); // ✅ 组件卸载时清理
}, []);

[可视区域]        [完整列表]
┌─────────┐     ┌───────────────────┐
│ 渲染项1 │     │ 项1 项2 ... 项9999 │
│ 渲染项2 │     └───────────────────┘
│ 渲染项3 │     ▲ 动态计算渲染范围
└─────────┘     ▼ 回收不可见节点

// 使用react-window实现虚拟列表
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<FixedSizeList
  height={400}
  width={300}
  itemSize={50}
  itemCount={10000}
>
  {Row}
</FixedSizeList>

主线程任务队列           Worker线程
┌──────────────┐       ┌──────────────┐
│  UI渲染       │       │  数据加密    │
│  事件响应     │ ←──→  │ 图像处理     │
└──────────────┘       │ CSV解析      │
                       └──────────────┘

// 主线程
import { wrap } from 'comlink';
const worker = new Worker(new URL('./analytics.worker', import.meta.url));
const analytics = wrap(worker);

// 调用
const result = await analytics.processBigData(rawData);

// analytics.worker.js
import { expose } from 'comlink';
const exports = {
  processBigData(data) {
    // 复杂计算逻辑
    return heavyCalculation(data);
  }
};
expose(exports);

function useSmartMemo(fn, deps) {
  const prevDeps = useRef(deps);
  const memoizedValue = useRef();

  if (!shallowEqual(deps, prevDeps.current)) {
    memoizedValue.current = fn();
    prevDeps.current = deps;
  }

  return memoizedValue.current;
}

// 使用：自动浅比较依赖项
const result = useSmartMemo(() => transform(data), [data]);

graph TD
  A[性能数据采集] --> B{关键指标}
  B --> C[FPS波动]
  B --> D[组件渲染耗时]
  B --> E[API请求时间]
  B --> F[内存占用率]
  A --> G[异常捕获]
  G --> H[渲染错误边界]
  G --> I[未处理Promise异常]

// 自定义性能埋点示例
useEffect(() => {
  const startTime = performance.now();
  // 组件渲染逻辑
  return () => {
    const renderTime = performance.now() - startTime;
    reportMetric('ComponentRenderTime', renderTime); // ✅ 上报到监控平台
  };
}, []);

[代码提交] → [ESLint规则检查] → [单元测试]  
           ↓  
[性能预算检测] → [Lighthouse审计] → [构建产物分析]  
           ↓  
[异常阈值判断] → [邮件/钉钉通知] → [部署拦截]

{
  "ci": {
    "assert": {
      "preset": "lighthouse:no-pwa",
      "assertions": {
        "first-contentful-paint": ["error", {"maxNumericValue": 2000}],
        "interactive": ["error", {"maxNumericValue": 3500}],
        "resource-summary:script:size": ["error", {"maxNumericValue": 500000}]
      }
    }
  }
}

// webpack.config.js 懒加载配置
output: {
  chunkFilename: '[name].[contenthash:8].chunk.js',
},
optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 20000, // ✅ 大于20KB的文件才拆分
  }
}

graph LR
  A[接口超时] -->|3次失败| B[切换备用API]
  B -->|继续失败| C[展示本地缓存]
  C -->|无缓存| D[降级UI骨架屏]
  D -->|持续异常| E[引导用户重试]

const WithFallback = (Component) => (props) => {
  const [isBroken, setIsBroken] = useState(false);

  return isBroken ? (
    <div className="fallback">
      <p>😢 功能暂时不可用</p>
      <button onClick={() => window.location.reload()}>点击重试</button>
    </div>
  ) : (
    <Component {...props} onError={() => setIsBroken(true)} />
  );
};

graph LR
  A[编码规范] --> B(静态检查)
  C[代码评审] --> D(人工卡点)
  E[监控告警] --> F(自动化拦截)
  B & D & F --> G[性能问题接近零新增]

// 反面案例1：无意义记忆化导致内存泄漏
const BadMemo = React.memo(({ data }) => {
  // data为频繁变化的复杂对象
  return <div>{JSON.stringify(data)}</div> 
}); // ❌ 未定义arePropsEqual时浅比较失效

// 反面案例2：滥用useEffect触发连锁更新
useEffect(() => {
  setStateA(calc(stateB)); 
  setStateC(calc(stateA));
}, [stateB]); // ❌ 引发瀑布式更新

// 享元模式实现示例：表格单元格渲染器池
const cellPool = {
  pool: [],
  get() {
    return this.pool.pop() || document.createElement('div');
  },
  release(element) {
    this.pool.push(element);
  }
};

function TableCell({ content }) {
  const ref = useRef();
  useEffect(() => {
    const element = cellPool.get();
    element.textContent = content;
    ref.current.appendChild(element);
    return () => cellPool.release(element);
  }, [content]);
  return <td ref={ref} />;
}

graph TB
  A[基础优化] --> B{应用规模}
  B --> C[小型应用: useMemo/React.memo]
  B --> D[中型应用: 并发模式+虚拟化]
  B --> E[大型应用: 微前端+Worker集群]
  C --> F[零成本抽象]
  D --> F
  E --> F

是否需要处理CPU密集型任务？
├─ 是 → 使用Web Worker
└─ 否 → 是否存在高频更新？
   ├─ 是 → 采用并发模式+时间切片
   └─ 否 → 是否需要跨组件状态共享？
      ├─ 是 → Context/状态管理库
      └─ 否 → 常规记忆化方案

// 未来可能的方向：编译时优化
function OptimizedComponent(props: { list: Array<Item> }) {
  // 编译器自动注入记忆化逻辑
  const filteredList = props.list.filter(item => item.visible);
  
  return (
    <div>
      {filteredList.map(item => (
        // 自动应用虚拟滚动
        <ListItem key={item.id} data={item} />
      ))}
    </div>
  );
}