React 性能优化：React.memo + useCallback 实践指南

在 React 中，不必要的组件重渲染是常见性能瓶颈。通过组合使用 React.memo 和 useCallback 可显著减少无效渲染：

优化原理

1. 组件重渲染机制
   当父组件状态更新时，所有子组件默认重新渲染 $$ \text{父组件更新} \Rightarrow \text{所有子组件重新渲染} $$

2. 优化工具作用

   • React.memo：对组件进行浅层 props 比较，避免相同 props 时的重渲染
   • useCallback：缓存函数引用，避免因回调函数重建导致的 props 变化

实践方案

// 子组件：使用 React.memo 包裹
const ChildComponent = React.memo(({ onClick }) => {
  console.log("子组件渲染");
  return <button onClick={onClick}>点击</button>;
});

// 父组件：使用 useCallback 缓存回调
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // 缓存回调函数
  const handleClick = useCallback(() => {
    console.log("回调执行");
  }, []); // 空依赖表示永不重建

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        计数: {count}
      </button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

关键优化点

1. React.memo 工作流程

   graph LR
   A[Props变化] --> B{React.memo比较}
   B -->|不同| C[重新渲染]
   B -->|相同| D[跳过渲染]
   

2. useCallback 依赖关系
   当依赖项发生变化时才重建函数： $$ \text{重建条件} = \text{依赖项集合 } D \text{ 发生变化} $$

使用场景建议

性能验证方法

1. 使用 React DevTools 的 ⚡️ Profiler 检测渲染次数
2. 添加渲染日志辅助调试
3. 关键指标：渲染时间减少比例 $$ \eta = \frac{T_{\text{优化前}} - T_{\text{优化后}}}{T_{\text{优化前}}} \times 100% $$

最佳实践：优先定位实际性能瓶颈，避免过度优化。对于复杂组件，可结合 useMemo 进行值缓存，形成完整优化链条。