Meta 的 React Compiler 1.0 将自动记忆化引入到生产环境

React是一个被广泛采用的用于构建用户界面的 JavaScript 库，随着 React Compiler 1.0 的稳定发布，React 达到了一个里程碑，这个版本建立在近十年的工程工作和编译器学习的基础之上，改变了开发人员优化 React 应用程序的方式。

React Compiler 1.0 是一个构建时工具，通过自动记忆化来优化 React 应用程序，同时支持 React 和 React Native，而无需重写代码。该编译器已经在Meta的主要应用程序中经过了实战测试，现在完全准备好投入生产。该工具分析组件数据流和可变性，以消除不必要的渲染，覆盖手动 useMemo 和 useCallback 实现无法处理的条件路径。

编译器通过 eslint-plugin-react-hooks 中的推荐预设集成了诊断功能，同时为Expo、Vite和Next.js提供了第一方模板。Expo SDK 54 默认启用了编译器，而 Vite 和 Next.js 为新应用程序提供了启用编译器的启动器。Next.js 16 将 React Compiler 支持列为稳定的，团队建议在启用编译器时使用 15.3.1 或更高版本的 Next.js。

在生产环境中，性能得到了显著的。Meta 报告称，初始加载速度提高了高达 12%，在 Meta Quest Store 中的交互速度提高了 2.5 倍以上，尽管结果因应用程序而异。来自Sanity Studio和Wakelet的真实案例研究展示了采用编译器后可衡量的性能提升，开发者报告组件渲染效率有了明显的改善。

额外的真实度量指标提供了编译器影响的详细见解。Sanity Studio 在他们的2024年 11 月变更日志中记录了使用 React Compiler 预编译他们的包后的重大收益：

到目前为止，已经编译了 1411 个组件中的 1231 个，从而使渲染时间和延迟减少了 20%到 30%。。当我们重构剩下的 180 个组件以支持自动记忆时，我们预计会有更大的改进。

Wakelet 在他们的案例研究中分享了将编译器推向 100%用户后的综合生产指标：

总体而言，我们的 LCP 提高了 10%（从 2.6 秒提高到 2.4 秒），我们的 INP 提高了约 15%（从 275 毫秒降到 240 毫秒）。通过更细粒度的测试，我们发现在纯 React 元素（如 Radix 下拉菜单）中获得的收益最大，其中 INP 加速接近 30%。

独立开发者 Nadia Makarevich 在一个大约有 15,000 行代码的真实应用程序上进行了测试，结果参差不齐。初始加载性能的影响很小，启用编译器之前和之后的 Lighthouse 分数几乎保持一致。然而，交互性能的提升因用例而异。在一个测量主题切换交互的测试中，总阻塞时间从 280 毫秒降至零。在另一个涉及复选框筛选交互的测试中，阻塞时间从 130 毫秒减少到 90 毫秒，尽管编译器未能消除由于来自外部库的非记忆对象引用而导致的所有重新渲染。

编译器的开发历史可以追溯到 React 团队在 2017 年对编译器的首次探索，即Prepack。尽管该项目最终被终止，但所学到的知识为 Hooks 的设计提供了信息，Hooks 是为未来编译器而创建的。在 2021 年，当前编译器方法的第一次迭代被演示，导致可在 React Conf 2024 上发布的实验版本和随后发布的全年 beta 版本。

与流行库的兼容性问题仍然存在。GitHub讨论显示，react-hook-form用户报告某些函数，包括 useWatch 和 getValues，在编译器下可能会遇到问题。

React 团队通过一个可选的react-compiler-runtime包，正式支持 React 17 及更高版本的应用程序上的编译器，使团队可以逐步采用，而不是升级到 React 19。鼓励当前使用早期版本的开发者使用react-compiler-healthcheck工具检查兼容性，并查看与 1.0 版本一起发布的逐步采用指南。迁移文档建议从 React 18.3 开始，该版本包括对 React 19 兼容性所需的弃用 API 的警告。

React Compiler 为现有的 React 生态系统带来了优化，而无需更改框架，它将这种能力添加到 React 的以运行时为中心的体系结构中。编译器代表了 React 性能优化哲学的转变，从手动开发者干预转向自动化构建时分析，尽管团队建议在效果依赖项需要精确控制的地方保留 useMemo 和 useCallback 作为应急出口。

原文链接：

https://www.infoq.com/news/2025/12/react-compiler-meta/