React 性能优化——memo、useCallback 与 useMemo 的正确用法

#1 发表于 2026-03-21 00:57:49

React 默认会在父组件渲染时重渲染所有子组件，但通过合理使用缓存 API 可以避免不必要的渲染，提升性能。

1. React.memo 避免组件无意义重渲染

当子组件的 props 未变化时，React.memo 会跳过渲染。

const Child = React.memo(({ name }) => {
  console.log('Child rendered');
  return <div>{name}</div>;
});

2. useCallback 缓存函数引用

父组件内的函数每次渲染都会重新创建，导致即使子组件使用了 memo，仍因 props 引用变化而重渲染。

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []); // 依赖为空，函数引用不变

  return (
    <>
      <button onClick={() => setCount(c => c+1)}>Count: {count}</button>
      <Child onClick={handleClick} />
    </>
  );
}

3. useMemo 缓存计算结果

对于昂贵的计算，useMemo 仅在依赖变化时重新计算。

const expensiveValue = useMemo(() => {
  return heavyComputation(data);
}, [data]);

常见误区

滥用 memo：对简单组件使用 memo 反而会增加内存开销和比较成本。
过度 useCallback/useMemo：只在依赖项传递到被 memo 包裹的子组件或作为其他 hook 依赖时使用。
忽略 key 优化：列表渲染时使用稳定且唯一的 key，避免破坏 diff 算法。

性能分析工具

使用 React DevTools 的 Profiler 记录渲染耗时，定位频繁重渲染的组件。