先测量,然后修复真正的原因——不要凭猜测到处撒 useMemo。
诊断
使用 React DevTools Profiler(启用 "Highlight updates when components render")。它会显示哪些组件重新渲染了,以及为什么(props 改变、state 改变、父组件渲染、context 改变)。
常见原因与修复方法
1. 每次渲染都创建新的 object/array/function props,会让 React.memo 失效:
jsx
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
style = ( ({ : }), []);
2. 每次渲染都重新创建 context value → 所有的 consumer 都会重新渲染。对 value 进行 memoize,或者拆分 context。
3. state 放得太高。 把 state 下移,使更少的组件依赖它,这通常是最大的收益:
jsx
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. 在渲染中进行昂贵的计算 → 用 useMemo 包裹。
不要过度优化
重新渲染通常开销很小——React 很快。大多数「优化」只是增加复杂度,却没有可衡量的收益。优先采用结构性的修复(把 state 就近放置、对成千上万行进行列表虚拟化),而不是到处散布 memo。只针对 profiler 揭示出的具体热点进行优化,并重新测量以确认修复确实起了作用。
