React性能优化实战：memo、useMemo与useCallback的正确使用边界

React组件重复渲染的定位思路与优化前提

React应用卡顿大多是组件重复渲染造成的。React官方推荐的React DevTools Profiler可以记录每次渲染触发的原因，火焰图里标红的组件就是重渲染重灾区。优化要建立在测量之上，先定位再动手，不要无脑给所有组件包memo——优化成本和收益要对等。

React.memo、useMemo与useCallback的使用边界

三者的分工：

• React.memo(Component)：包裹组件，props浅比较不变时不重渲染，适合父组件频繁变化但子组件props稳定的场景。
• useMemo(() => value, deps)：缓存计算结果，适合计算量大的派生值（如过滤排序长列表），不适合缓存简单计算。
• useCallback(fn, deps)：缓存函数引用，配合memo使用，否则父组件每次渲染传入新函数，memo失效。

典型错误是给每个函数都包useCallback。函数是轻量对象，包一层反而增加创建成本，只有函数作为prop传给被memo的子组件时才有收益。判断标准：是不是传给memo组件？不是就别包。

useMemo与useCallback依赖数组的常见误用

依赖数组写错会引入陈旧闭包。例如：

const memoizedCallback = useCallback(
  () => doSomething(itemId),   // itemId 是外部状态
  []   // 空依赖，itemId 永远是首次渲染的值
);

上面这个回调永远拿不到最新itemId。正确写法是把itemId写进依赖数组，或者用useRef保存最新值。类似的，useMemo的依赖缺了字段，缓存值不会随状态更新。调试依赖问题最直接的办法：打开React DevTools的Hooks面板，看缓存值的依赖列表与实际使用值。

React.memo导致子组件不更新的排查流程

遇到memo子组件不更新，按顺序检查：props里是否传了对象字面量/数组字面量（每次渲染新引用）；回调是否用useCallback；父组件的state是否真的变化；组件内部是否用了context且context值在变化。其中对象字面量是最高频的坑：

// 错误：每次渲染生成新对象，memo失效
<Child config={{ theme: "dark" }} />
// 正确：useMemo缓存对象引用
const config = useMemo(() => ({ theme: "dark" }), []);

同样的，数组map渲染子项时，把每项抽成memo组件并用稳定key。React并发渲染下的memo仍按浅比较工作，跨组件共享状态用useReducer/useContext组合，避免把状态打进每个组件的props。

React性能优化上线前收益验证方法

优化完用Profiler对比渲染时间（Average render duration），记录Before/After；结合Lighthouse的性能分，量化FCP/LCP改善。渲染频率取决于应用规模：中小型应用页面组件就几百个节点时，memo带来的收益有限，过度优化反而增加阅读难度；大型表格、图表列表、长列表虚拟化、高频输入组件，这几类场景收益最大。最后用React DevTools的Highlight updates高亮，确认重渲染只发生在应该发生的组件上。