React.memo / useMemo / useCallback 的性能优化有哪些常见误区?
它们不是银弹,用错反而更慢(记忆化本身有成本):
- React.memo:对 props 做浅比较,props 不变则跳过重渲染。但每次父渲染都新建函数/对象传给子组件 → 浅比较永远不等 → memo 失效
- useCallback:缓存函数引用,需配合 memo 使用才有意义;无依赖数组变化时才返回同一函数
- useMemo:缓存计算结果,适合昂贵计算或作为 memo 子组件的 props
误区:
- 给所有组件包 memo —— 多数组件重渲染成本极低,反而增加比对开销
- 在 useMemo 里返回新对象/数组却没缓存依赖 → 依旧每次新建
- 忘记用 useCallback 包裹传给 memo 子组件的函数
优化前先用 React DevTools Profiler 定位真正昂贵的重渲染。