博客

React 编译器 Beta 版发布

2024年10月21日 作者：Lauren Tan。

React 团队很高兴地分享最新的更新

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

在 React Conf 2024 上，我们宣布了 React 编译器的实验性版本发布，这是一个构建时工具，它通过自动记忆化来优化您的 React 应用程序。您可以在此处找到 React 编译器的介绍。

自从第一次发布以来，我们修复了 React 社区报告的许多错误，收到了几个高质量的错误修复和贡献1 到编译器，使编译器对广泛的 JavaScript 模式更具弹性，并且继续在 Meta 更广泛地推出编译器。

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

立即试用 React 编译器 Beta 版

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

安装 React 编译器 Beta 版

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

或者，如果您使用的是 Yarn

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

您可以在此处观看 Sathya Gunasekaran 在 React India 的演讲

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

React 编译器的 ESLint 插件帮助开发者主动识别和纠正 React 规则 违规行为。我们强烈建议大家今天就使用代码检查器。代码检查器不需要安装编译器，因此即使您尚未准备好试用编译器，也可以独立使用它。

仅安装代码检查器

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

或者，如果您使用的是 Yarn

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

安装后，您可以通过 将其添加到您的 ESLint 配置 来启用代码检查器。使用代码检查器可以帮助识别 React 规则的破坏，从而在完全发布编译器时更容易采用它。

向后兼容性

React 编译器生成的代码依赖于 React 19 中添加的运行时 API，但我们后来添加了对编译器也与 React 17 和 18 一起工作的支持。如果您尚未使用 React 19，在 Beta 版本中，您现在可以通过在编译器配置中指定最小 target，并将 react-compiler-runtime 作为依赖项来试用 React 编译器。您可以在此处找到相关文档。

在库中使用 React 编译器

我们最初的版本侧重于识别在应用程序中使用编译器时遇到的主要问题。我们已经收到了很好的反馈，并且从那时起已经大幅改进了编译器。我们现在已经准备好从社区获得广泛的反馈，并让库作者试用编译器以提高性能和维护库的开发人员体验。

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

由于您的代码是预编译的，因此您的库用户无需启用编译器即可受益于应用于您库的自动记忆化。如果您的库的目标应用尚未使用 React 19，请指定最小 target 并添加 react-compiler-runtime 作为直接依赖项。运行时包将根据应用程序的版本使用正确的 API 实现，并在必要时填充缺失的 API。

您可以在此处找到更多文档。

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

我们之前在 React Conf 上宣布了仅限邀请的 React 编译器工作组，以提供反馈、提出问题和协作编译器的实验版本。

从今天开始，连同 React 编译器的 Beta 版本一起，我们将向所有人开放工作组成员资格。React 编译器工作组的目标是为现有应用程序和库顺利、逐步采用 React 编译器做好准备。请继续在 React 代码库 中提交错误报告，但请在 工作组讨论论坛 中留下反馈、提出问题或分享想法。

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

Meta 中的 React 编译器

在 React Conf 上，我们分享了我们在 Quest Store 和 Instagram 上成功推出了编译器。从那时起，我们已经在 Meta 的更多主要 Web 应用中部署了 React 编译器，包括 Facebook 和 Threads。这意味着如果您最近使用过这些应用程序中的任何一个，您的体验可能就由编译器提供支持。我们能够在几乎不需要代码更改的情况下，在一个包含超过 100,000 个 React 组件的单体代码库中，将这些应用程序迁移到编译器。

我们在所有这些应用程序中都看到了显著的性能提升。在推出过程中，我们继续看到 我们在 ReactConf 上之前分享的成果 规模的改进。这些应用程序多年来一直由 Meta 工程师和 React 专家进行了大量的精细调整和优化，因此即使是百分之几的改进对我们来说也是巨大的胜利。

我们还预计 React 编译器会提高开发人员的生产力。为了衡量这一点，我们与 Meta 的数据科学合作伙伴2 合作，对手动记忆化对生产力的影响进行了彻底的统计分析。在 Meta 推出编译器之前，我们发现只有大约 8% 的 React pull request 使用了手动记忆化，而这些 pull request 的编写时间要长 31-46%3。这证实了我们关于手动记忆化会增加认知负担的直觉，我们预计 React 编译器将有助于更有效地编写和审查代码。值得注意的是，React 编译器还确保默认情况下所有代码都进行记忆化，而不仅仅是我们（在我们的案例中）8% 的开发人员显式应用记忆化的代码。

稳定版路线图

这不是最终的路线图，可能会发生变化。

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

  • ✅ 实验版：在 React Conf 2024 发布，主要用于早期采用者的反馈。
  • ✅ 公共 Beta 版：现已推出，用于更广泛社区的反馈。
  • 🚧 候选版本 (RC)：React 编译器可以处理大多数遵循规则的应用程序和库，且不会出现问题。
  • 🚧 正式发布：社区最终反馈期之后。

这些版本还包括编译器的 ESLint 插件，该插件以编译器静态分析的方式呈现诊断信息。我们计划将现有的 eslint-plugin-react-hooks 插件与编译器的 ESLint 插件合并，因此只需要安装一个插件。

稳定版发布后，我们计划添加更多编译器优化和改进。这包括对自动记忆化的持续改进以及全新的优化，而产品代码几乎无需更改。升级到每个新版本的编译器都旨在简单明了，并且每次升级都将持续改进性能并更好地处理各种 JavaScript 和 React 模式。

在此过程中，我们还计划为 React 创建一个 IDE 扩展。它目前还处于研究的早期阶段，因此我们预计能够在未来的 React Labs 博客文章中与您分享更多我们的发现。

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

脚注

  1. 感谢@nikeee、@henryqdineen、@TrickyPi以及其他几位贡献者对编译器的贡献。↩

  2. 感谢Vaishali Garg领导Meta关于React编译器的这项研究，并审阅了这篇文章。↩

  3. 在控制作者任期、差异长度/复杂度和其他潜在混杂因素后。↩

上一篇博客
下一篇React Conf 2024 回顾