📚 课程目录第4章 React渲染优化

4. React渲染优化：memo、useMemo、useCallback、shouldComponentUpdate、不可变数据

渲染优化是React架构面试的必考点。面试官关注你是否真正理解组件重渲染触发机制，以及能否在复杂场景中合理选择优化手段。本章通过3个高频问答和一个真实项目模板，帮你建立从原理到实战的完整知识链。

决策法则：先在组件外层考虑 React.memo（浅比较 props），再在内层用 useMemo/useCallback 缓存计算结果和回调；如果类组件则使用 shouldComponentUpdate + 不可变数据。避免过早优化，先用 React DevTools 分析重渲染原因。

考察点：组件优化机制的理解深度，能否区分函数组件与类组件的不同方案。
回答框架：1. 定义差异（memo 是 HOC，SCU 是生命周期） → 2. 比较逻辑（memo 默认浅比较 props，SCU 可自定义） → 3. 场景对比（函数组件用 memo，类组件用 SCU）。
示例回答：“React.memo 是函数组件的浅比较 HOC，默认比较 props 引用是否变化；shouldComponentUpdate 是类组件生命周期，可返回布尔值决定是否重渲染，通常配合不可变数据使用。如果组件纯且 props 变化不频繁，用 memo；如果需要自定义比较逻辑或访问 state，用 SCU。”
可能追问：① memo 的第二个参数（areEqual）如何实现深比较？② SCU 中能否调用 setState？③ 两者同时使用会怎样？
避坑提醒：不要盲目给所有组件加 memo，会因浅比较增加额外开销；SCU 中禁止直接执行 setState（会导致死循环）；自定义比较函数应保持纯函数。

考察点：对缓存行为的理解，能否区分“值”缓存与“函数引用”缓存。
回答框架：1. 本质区别（useMemo 缓存计算结果，useCallback 缓存函数引用） → 2. 使用场景（高开销计算用 useMemo；传递给子组件的回调用 useCallback） → 3. 依赖管理（必须正确声明依赖数组）。
示例回答：“useMemo 返回缓存值，避免在每次渲染时重复执行昂贵计算（如数组排序、深克隆）。useCallback 返回缓存的函数引用，防止子组件因回调引用变化而触发不必要的重渲染。例如：
```
const sortedList = useMemo(() => list.sort(), [list]);\nconst handleClick = useCallback(() => setCount(c => c+1), []);
```
”
可能追问：① 依赖数组为空时有什么风险？② 能否用 useMemo 替代 useCallback？③ 写出一个 useCallback 导致闭包陷阱的例子。
避坑提醒：依赖数组必须包含所有被读取的响应式变量；避免在 useMemo 中执行副作用；不要过度使用，普通计算无需缓存。

考察点：对 React 引用比较机制的理解，以及实际编码能力。
回答框架：1. 原理（React 通过浅比较判断变化，直接修改对象属性不会生成新引用） → 2. 后果（导致 SCU 或 memo 失效） → 3. 实现方式（展开运算符、immer、Immutable.js）。
示例回答：“不可变数据保证每次修改都返回新引用，让 SCU 和 memo 的浅比较能正确识别变化。例如更新对象：
```
setUser(prev => ({ ...prev, name: 'new' }));
```
如果直接改属性，React 会认为引用未变，跳过渲染。推荐使用 immer 简化深层更新：produce(state, draft => { draft.items[0].name = 'x' })。”
可能追问：① immer 是如何实现不可变性的？② 不可变数据是否影响性能（复制开销）？③ 在 Redux 中如何处理嵌套数据？
避坑提醒：展开运算符只做浅拷贝，嵌套对象仍需手动更新每层；immuatable.js 会引入体积开销，权衡使用；永远不要在 setState 中直接修改 state。

项目名称	实时金融行情看板
业务背景	通过 WebSocket 推送秒级行情数据，展示 100+ 股票指标，用户可拖拽排序、筛选、缩放图表。
规模指标	同时在线 5000+ 用户；每秒钟接收 2000+ 行情变化；组件树深度 12 层。
技术栈	React 18 + TypeScript + Redux Toolkit + React.memo + useMemo + immer + Recharts
核心难点	1. 高频数据更新导致大量无用渲染，卡顿明显。2. 复杂对象嵌套更新时，不可变数据写法繁琐。3. 图表组件每次重渲染都会重新绘制，影响交互流畅度。
面试高频追问	① 怎么确定哪些组件需要加 React.memo？——通过 Profiler 分析，只对收到频繁变化 props 的叶子组件加 memo。② 如何处理 WebSocket 数据与 Redux 的分发性能？——使用 batch 更新、拆分 reducer、用 immer 批量更新。③ 图表组件如何跳过不必要的重渲染？——对图表配置使用 useMemo 缓存，数据更新时仅修改被影响的 series。
可迁移回答话术	“在这个项目中，我通过三个层级优化了渲染性能：1. 顶层用 Redux 的 createSelector 做记忆化派生；2. 中间容器组件用 useMemo 缓存过滤/排序结果；3. 叶子组件用 React.memo + 不可变数据确保浅比较生效。同时使用 immer 简化嵌套对象更新，代码可维护性提升 40%。”

⛔ 面试常见错误：① 混淆 useMemo 与 useEffect 的依赖含义（useMemo 在渲染期间执行，useEffect 在提交后执行）；② 在 useMemo 内部修改了外部变量；③ 对类组件组件使用 React.memo（应使用 PureComponent 或手动 SCU）。