React 性能优化

React Compiler 会如何影响手动性能优化？

Compiler 可以减少部分手动 memoization，但不能替代状态建模、网络优化、虚拟化和性能测量。

适合阶段：资深前端 / React 19+ 项目核心能力：Compiler · 自动缓存 · 渐进迁移

面试官想考什么

• Compiler 自动优化了什么？ 考察新能力理解。
• 启用 Compiler 是否可以删除所有 memo？ 考察边界判断。
• Compiler 对代码有什么前提？ 考察 Rules of React。
• 如何渐进启用和回滚？ 考察工程落地。

一句话回答

React Compiler 能自动做部分组件和计算的 memoization，减少手写 useMemo、useCallback 和 memo 的需要，但前提是遵循 React 规则，且仍需人工治理数据、网络、DOM 和算法瓶颈。

面试回答详解

1. Compiler 主要解决什么

官方文档当前将 Compiler 定位为自动应用合适的 memoization，重点减少级联重渲染和重复的昂贵计算。它不是把任意 JavaScript 函数都变成全局缓存。

2. 和手动 memo 的关系

• 自动优化：编译器根据组件和 Hook 的依赖推断可复用结果。
• 手动优化：仍可用于明确的 API 契约、第三方库边界或未被编译的代码。
• 不能替代：虚拟列表、代码分割、请求并行、服务端分页、Web Worker 和算法优化。

3. 启用前提

Compiler 依赖语义正确的 JavaScript 和 Rules of React。副作用放在 render、依赖引用判断、可变数据和不纯组件可能导致编译后行为异常。

4. 渐进落地

静态检查 -> 小范围编译 -> 关键交互回归 -> 性能对比
-> 逐步扩大 -> 问题组件 opt-out/回滚

需要记录编译版本、构建产物、DevTools 标记和 RUM 数据，不要一次性全量切换后凭感觉判断。

可直接背诵的 30 秒回答

React Compiler 主要自动处理组件和 Hook 级别的 memoization，减少手写 memo、useMemo 和 useCallback，但它不是万能性能方案。启用前要保证 Rules of React、纯渲染和依赖语义正确，落地时先小范围编译，结合 DevTools、bundle、Profiler 和 RUM 验证，再逐步扩大；网络、虚拟化和算法问题仍然需要架构层处理。

扩展知识

Compiler 的能力边界

更新复用 -> Compiler
大数据 DOM -> 虚拟化
请求等待 -> 并行/缓存
CPU 长任务 -> 拆分/Worker
首屏体积 -> 代码分割

面试官追问链

追问一：启用 Compiler 后还需要 React.memo 吗？

• 考察点：是否会绝对化理解。
• 回答方向：很多场景可以减少手写 memo，但未编译边界、第三方库、明确 API 契约和特殊比较逻辑仍需评估，不能机械删除。

追问二：Compiler 出现运行时问题如何排查？

• 考察点：渐进迁移能力。
• 回答方向：记录构建版本，先用 lint/compiler diagnostics 定位，再对可疑组件使用 opt-out，对比编译前后行为和最小复现。

追问三：为什么 Compiler 后首屏没有变快？

• 考察点：是否理解优化阶段。
• 回答方向：Compiler 主要改善更新性能，不一定减少首屏网络、解析、SSR、图片或字体成本。

推荐阅读

• React Compiler Introduction
• React Compiler Installation
• React Compiler Debugging
• React 性能优化