React 编译器 Beta 版本发布

2024年10月21日，由Lauren Tan发表。

🌐 October 21, 2024 by Lauren Tan.

1. 我们今天发布了 React 编译器 Beta，以便早期采用者和库维护者可以尝试并提供反馈。
2. 我们正式支持在 React 17 及以上版本的应用中使用 React 编译器，通过一个可选的 react-compiler-runtime 包。
3. 我们正在开放 React 编译器工作组 的公开成员资格，以为社区逐步采用该编译器做准备。

在 React Conf 2024，我们宣布了 React Compiler 的实验性发布，这是一种在构建时优化 React 应用的工具，通过自动记忆化来提高性能。你可以在这里找到 React Compiler 的介绍。

🌐 At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. You can find an introduction to React Compiler here.

自首次发布以来，我们修复了 React 社区报告的众多漏洞，收到了对编译器的几项高质量漏洞修复和贡献¹，使编译器对各种 JavaScript 模式更加具有弹性，并且继续在 Meta 更广泛地推行该编译器。

🌐 Since the first release, we’ve fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions¹ to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta.

在这篇文章中，我们想分享 React 编译器的下一步计划。

🌐 In this post, we want to share what’s next for React Compiler.

今天试试 React 编译器测试版

🌐 Try React Compiler Beta today

在 React India 2024 上，我们分享了关于 React 编译器的更新。今天，我们很高兴地宣布 React 编译器和 ESLint 插件的新测试版发布。新的测试版已使用 @beta 标签发布到 npm。

🌐 At React India 2024, we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the @beta tag.

要安装 React 编译器测试版：

🌐 To install React Compiler Beta:

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

或者，如果你使用 Yarn：

🌐 Or, if you’re using Yarn:

yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

你可以在这里观看 Sathya Gunasekaran 在 React India 的演讲：

🌐 You can watch Sathya Gunasekaran’s talk at React India here:

我们建议大家今天使用 React 编译器的代码检查工具

🌐 We recommend everyone use the React Compiler linter today

React 编译器的 ESLint 插件帮助开发者主动识别和纠正 React 规则 的违规行为。我们强烈建议大家今天就使用这个代码检查工具。该代码检查工具不要求你必须安装编译器，因此即使你还没有准备好尝试编译器，也可以独立使用它。

🌐 React Compiler’s ESLint plugin helps developers proactively identify and correct Rules of React violations. We strongly recommend everyone use the linter today. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler.

仅安装代码检查工具：

🌐 To install the linter only:

npm install -D eslint-plugin-react-compiler@beta

或者，如果你使用 Yarn：

🌐 Or, if you’re using Yarn:

yarn add -D eslint-plugin-react-compiler@beta

安装后，你可以通过将其添加到你的 ESLint 配置 来启用 linter。使用 linter 有助于识别 React 规则的违规情况，从而在编译器完全发布时更容易采用它。

🌐 After installation you can enable the linter by adding it to your ESLint config. Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it’s fully released.

向后兼容性

🌐 Backwards Compatibility

React 编译器生成的代码依赖于在 React 19 中添加的运行时 API，但我们随后增加了对编译器也能在 React 17 和 18 上工作的支持。如果你尚未使用 React 19，在 Beta 版本中，你现在可以通过在编译器配置中指定最低 target，并添加 react-compiler-runtime 作为依赖来尝试使用 React 编译器。你可以在这里找到相关文档。

🌐 React Compiler produces code that depends on runtime APIs added in React 19, but we’ve since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum target in your compiler config, and adding react-compiler-runtime as a dependency. You can find docs on this here.

在库中使用 React 编译器

🌐 Using React Compiler in libraries

我们的初始版本主要集中在识别在应用中使用编译器的主要问题。我们收到了很好的反馈，并从那时起大幅改进了编译器。现在，我们已经准备好接受社区的广泛反馈，并让库作者尝试使用编译器，以提高性能并改善维护库的开发者体验。

🌐 Our initial release was focused on identifying major issues with using the compiler in applications. We’ve gotten great feedback and have substantially improved the compiler since then. We’re now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library.

React 编译器也可以用于编译库。因为 React 编译器需要在进行任何代码转换之前运行在原始源代码上，所以应用的构建管道无法编译它们使用的库。因此，我们建议库维护者独立使用编译器编译和测试他们的库，并将编译后的代码发布到 npm。

🌐 React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application’s build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.

因为你的代码是预编译的，你的库的用户无需启用编译器即可利用自动应用到库的缓存功能。如果你的库面向尚未使用 React 19 的应用，请指定最低 target 并将 react-compiler-runtime 添加为直接依赖。运行时包将根据应用的版本使用正确的 API 实现，并在必要时为缺失的 API 提供 polyfill。

🌐 Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum target and add react-compiler-runtime as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application’s version, and polyfill the missing APIs if necessary.

你可以在这里找到更多文档。

向所有人开放 React 编译器工作组

🌐 Opening up React Compiler Working Group to everyone

我们之前在 React 大会上宣布了仅限邀请的 React 编译器工作组，以提供反馈、提出问题并协作推进编译器的实验性发布。

🌐 We previously announced the invite-only React Compiler Working Group at React Conf to provide feedback, ask questions, and collaborate on the compiler’s experimental release.

从今天起，随着 React 编译器 Beta 版本的发布，我们向所有人开放工作组成员资格。React 编译器工作组的目标是为现有应用和库平稳、逐步地采用 React 编译器做好生态系统准备。请继续在 React 仓库 提交错误报告，但请在 工作组讨论论坛 提出反馈、提问或分享想法。

🌐 From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the React repo, but please leave feedback, ask questions, or share ideas in the Working Group discussion forum.

核心团队还将使用讨论仓库来分享我们的研究成果。随着稳定版本的临近，任何重要信息也将发布在这个论坛上。

🌐 The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum.

Meta 的 React 编译器

🌐 React Compiler at Meta

在React Conf上，我们分享了在Quest Store和Instagram上推出编译器的成功情况。从那时起，我们已经在Meta的更多主要网页应用上部署了React编译器，包括Facebook和Threads。这意味着如果你最近使用过这些应用，你的体验可能是由该编译器提供支持的。我们能够让这些应用很少进行代码更改就接入编译器，在一个拥有超过100,000个React组件的单仓库中完成了这一过程。

🌐 At React Conf, we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we’ve deployed React Compiler across several more major web apps at Meta, including Facebook and Threads. That means if you’ve used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components.

我们在所有这些应用中都看到了显著的性能提升。随着我们逐步推出，我们继续看到与我们之前在ReactConf分享的成果相当的结果。这些应用多年来已经经过Meta工程师和React专家的大量手工调整和优化，因此即使是几个百分点的改进，对我们来说也是一个巨大的胜利。

🌐 We’ve seen notable performance improvements across all of these apps. As we’ve rolled out, we’re continuing to see results on the order of the wins we shared previously at ReactConf. These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us.

我们也期望 React 编译器能提升开发者的生产力。为了衡量这一点，我们与 Meta 的数据科学合作伙伴² 共同进行了手动缓存对生产力影响的深入统计分析。在 Meta 推出编译器之前，我们发现只有大约 8% 的 React pull request 使用了手动缓存，并且这些 pull request 的编写时间长了 31-46%³。这验证了我们的直觉，即手动缓存会增加认知负担，我们预计 React 编译器将带来更高效的代码编写和审核。值得注意的是，React 编译器还确保 所有 代码默认都被缓存，而不仅仅是开发者显式应用缓存的那 8%（在我们的例子中）。

🌐 We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta² to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author³. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that all code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization.

通向稳定的路线图

🌐 Roadmap to Stable

这不是最终路线图，可能会有所变动。

我们打算在 Beta 版本发布后不久发布编译器的候选发行版本，当大多数遵循 React 规则的应用和库已经被证明能很好地与编译器配合工作后。在经过一段时间的社区最终反馈后，我们计划发布编译器的稳定版本。稳定版本将标志着 React 新基础的开始，并强烈建议所有应用和库使用该编译器和 ESLint 插件。

🌐 We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin.

• ✅ 实验性：在 2024 年 React 大会发布，主要用于收集早期使用者的反馈。
• ✅ 公共测试版：今天可用，接受更广泛社区的反馈。
• 🚧 发布候选版本 (RC)：React 编译器可以在大多数遵循规则的应用和库中正常工作。
• 🚧 一般可用性：在社区最终反馈期之后。

这些版本还包括编译器的 ESLint 插件，该插件展示了由编译器静态分析的诊断信息。我们计划将现有的 eslint-plugin-react-hooks 插件与编译器的 ESLint 插件结合起来，这样只需安装一个插件。

🌐 These releases also include the compiler’s ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler’s ESLint plugin, so only one plugin needs to be installed.

在Stable版本之后，我们计划增加更多的编译器优化和改进。这包括对自动记忆化的持续改进，以及全新的优化，同时对产品代码的改动最小甚至没有。每次升级到新的编译器版本都旨在尽可能简便，每次升级都将继续提升性能，并更好地处理各种JavaScript和React模式。

🌐 Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.

在整个过程中，我们还计划为 React 原型化一个 IDE 扩展。研究阶段仍处于非常初期的阶段，因此我们希望能够在未来的 React Labs 博客文章中与你分享更多我们的发现。

🌐 Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post.

感谢 Sathya Gunasekaran、Joe Savona、Ricky Hanlon、Alex Taylor、Jason Bonta 和 Eli White 审阅和编辑这篇文章。

🌐 Thanks to Sathya Gunasekaran, Joe Savona, Ricky Hanlon, Alex Taylor, Jason Bonta, and Eli White for reviewing and editing this post.