本文详解 React 中使用 React.memo 优化大量子组件渲染时的常见陷阱，重点解决因 useCallback 依赖缺失导致的父组件状态错乱、子组件异常消失或值被覆盖等问题，并提供基于函数式更新的安全写法。
本文详解 react 中使用 `react.memo` 优化大量子组件渲染时的常见陷阱，重点解决因 `usecallback` 依赖缺失导致的父组件状态错乱、子组件异常消失或值被覆盖等问题，并提供基于函数式更新的安全写法。
在构建高性能列表型组件（如含上千项的 TODO 列表）时，为避免父组件状态更新引发所有子组件无差别重渲染，开发者常采用 React.memo 包裹子组件以实现浅层 props 对比跳过渲染。但实践中，若父组件的回调函数（如 onChange 处理器）未正确维护依赖数组，极易引发隐蔽且严重的状态不一致问题——正如示例中：点击“Add text”添加多项后，在首个输入框输入，部分列表项消失、其他项文本被意外覆盖。
根本原因在于 useCallback 的依赖数组缺失关键变量。原始代码中：
const addText = useCallback(() => {
setTexts([...texts, "new bla"]);
}, []); // ❌ 缺失依赖 texts
const change = useCallback((newText, index) => {
const newTexts = [...texts];
newTexts[index] = newText;
setTexts(newTexts);
}, []); // ❌ 同样缺失 texts 依赖
当 texts 数组更新后，闭包中捕获的仍是旧引用，addText 和 change 均基于过期状态计算新值，导致状态“回滚”或索引错位，进而破坏 React.memo 的判定逻辑（因传入子组件的 text prop 实际已错乱），最终表现为 UI 异常。
✅ 正确解法是放弃依赖数组，改用函数式更新（functional update）：
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
const addText = useCallback(() => {
setTexts(prev => [...prev, "new bla"]); // ✅ 基于最新 prev 计算
}, []); // 无需依赖 texts
const change = useCallback((newText, index) => {
setTexts(prev => {
const next = [...prev];
next[index] = newText;
return next;
});
}, []); // 依然无需依赖
函数式更新确保每次 setTexts 都基于 React 内部最新的 state 值执行，彻底规避闭包 stale closure 问题。此时 React.memo 才能真正按预期工作：仅当子组件接收的 text 或 onChange 等 props 实际变化时才触发渲染。
⚠️ 注意事项：
- React.memo 并非银弹：对简单组件或少量子项，其开销可能大于收益；务必通过 React DevTools 的 Highlight Updates 功能验证优化效果；
- 若子组件 props 包含对象或函数，需确保其引用稳定性（例如用 useCallback 包裹事件处理器并正确设置依赖）；
- memo 默认浅比较（shallow compare），若 props 是嵌套对象，需自定义比较函数 memo(Component, areEqual)；
- 更大规模场景（如虚拟滚动）建议结合 react-window 或 react-virtualized 进一步优化。
总结：性能优化的前提是状态逻辑正确。优先使用函数式更新消除依赖管理风险，再辅以 React.memo 精准控制渲染粒度——二者协同，方能在千级列表中兼顾响应性与稳定性。
