React Compiler 如何自动优化你的组件

多年以来，React 开发者靠 useMemo、useCallback、React.memo 手动优化重渲染。React Compiler 的出现，试图把这些心智负担交给编译器自动完成。

手动记忆化的痛苦

手动优化的核心问题是容易用错：忘记加、加错依赖、过度记忆化反而更慢。而且这些代码噪音大，让组件难以阅读。

React Compiler 的思路是：由编译器分析组件，自动决定哪些值需要记忆化、何时该跳过重渲染。

它做了什么

编译器在构建时对组件做静态分析，识别出：

• 哪些计算的结果只依赖输入，可以缓存；
• 哪些 props 是稳定引用，可以跳过子组件重渲染；
• 哪些回调函数可以安全地复用引用。

然后自动插入等价的记忆化逻辑，开发者无需再手写。

// 优化前
const value = useMemo(() => compute(a, b), [a, b]);

// 开启 Compiler 后，直接写即可
const value = compute(a, b);

与 Hooks 的关系

React Compiler 不是要废弃 useMemo/useCallback，而是让它们在多数场景下变得不再必要。你依然可以在需要精确控制的特殊场景使用它们，只是默认情况下不必再操心。

迁移建议

1. 先跑 ESLint 插件 eslint-plugin-react-compiler，它会指出哪些代码违反了编译器的假设（如副作用、可变引用）；
2. 逐步开启，用测试与性能监控验证；
3. 遵守「纯函数」约定——编译器依赖组件的纯净性，副作用要显式声明。

结语

React Compiler 代表一种趋势：把「正确的默认」交给工具，而不是靠开发者的自觉。当优化不再需要技巧，团队就能把精力放回业务本身。