React 编译器 RC-海口c网

React 编译器 RC

article/2025/8/28 22:55:41

在这里插入图片描述

🤖 作者简介：水煮白菜王，一位前端劝退师 👻
👀 文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。
感谢支持💕💕💕
本文内容参考自 React博客 - React Compiler RC 内容进行记录和整理✍

React 编译器 RC
- 使用 React Compiler RC
- 反馈 issue
- 向后兼容性
- 从 eslint-plugin-react-compiler 迁移到 eslint-plugin-react-hooks
- SWC 支持（实验性）
- 升级 React 编译器
- 稳定版路线
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀

React 编译器 RC

2025 年 4 月 21 日 React 官方分享了新的更新公告：

发布了 React Compiler RC，为编译器的稳定版本做准备。
正在合并到 .eslint-plugin-react-compilereslint-plugin-react-hooks
添加了对 swc 的支持，并正在与 oxc 合作以支持无 Babel 构建。

React Compiler 是一个构建时工具，它通过自动记忆来优化React 应用程序。去年，React发布了 React Compiler 的第一个 beta 版，收到了很多很棒的反馈和贡献。React对采用编译器的开发者们所取得的胜利感到兴奋（参见 Sanity Studio 和 Wakelet 的案例研究），并正在努力实现稳定版本。

使用 React Compiler RC

安装 RC
npm

npm install --save-dev --save-exact babel-plugin-react-compiler@rc

pnpm

pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc

yarn

yarn add --dev --exact babel-plugin-react-compiler@rc

作为 RC 的一部分，官方一直在使 React Compiler 更容易添加到你的项目中，并优化了编译器生成记忆的方式。React Complier 现在支持可选的链和数组索引作为依赖项。React正在研究如何推断更多的依赖项，例如相等检查和字符串插值。这些改进最终会减少重新渲染次数并提高 UI 的响应速度。

React还从社区中听说，ref-in-render 验证有时会出现误报。由于作为一般理念，希望大家能够完全信任编译器的错误消息和提示，因此官方现在默认将其关闭。将继续努力改进此验证，并将在后续版本中重新启用它。

可以在React博客文档中找到有关使用 Compiler 的更多详细信息。

反馈 issue

在 RC 期间，鼓励所有 React 用户尝试编译器，并在 React 仓库中提供反馈。如果您遇到任何错误或意外行为，请打开一个 Issue 。如果你有一般性的问题或建议，请在 React 编译器工作组中发布。

向后兼容性

正如编辑器 Beta 版公告中所指出的，React Compiler 与 React 17 及更高版本兼容。如果你还没有使用 React 19，你可以通过在编译器配置中指定最小目标并添加为依赖项来使用 React 编译器。您可以找到相关文档。react-compiler-runtime

从 eslint-plugin-react-compiler 迁移到 eslint-plugin-react-hooks

如果你已经安装了 eslint-plugin-react-compiler，你现在可以删除它并使用 .（非常感谢 @michaelfaith 为这项改进做出了贡献）！eslint-plugin-react-hooks@6.0.0-rc.1

安装：

npm

npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1

pnpm

pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1

yarn

yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1

// eslint.config.js
import * as reactHooks from 'eslint-plugin-react-hooks';export default [// Flat Config (eslint 9+)reactHooks.configs.recommended,// Legacy ConfigreactHooks.configs['recommended-latest']
];

要启用 React 编译器规则，请添加到你的 ESLint 配置中。'react-hooks/react-compiler': 'error'

linter 不需要安装编译器，因此升级 eslint-plugin-react-hooks 没有风险。建议大家尽快就升级。

SWC 支持（实验性）

React Compiler 可以安装在多种构建工具上，例如 Babel、Vite 和 Rsbuild。

除了这些工具之外，React还与 swc 团队的 Kang Dongyoon 合作，将 React Compiler 作为 swc 插件添加额外的支持。虽然这项工作尚未完成，但当在 Next.js 应用程序中启用 React Compiler 时，Next.js构建性能现在应该会快得多。

建议使用 Next.js 15.3.1 或更高版本，以获得最佳构建性能。

Vite 用户可以继续使用 vite-plugin-react 来启用编译器，方法是将其添加为 Babel 插件。React还与 oxc团队合作，以添加对编译器的支持。一旦 rolldown正式发布并在 Vite 中得到支持，并且为 React 编译器添加了 oxc 支持，将更新文档，提供有关如何迁移的信息。

升级 React 编译器

React Compiler 在应用自动记忆严格为了性能时效果最好。编译器的未来版本可能会改变 memoization 的应用方式，例如它可能会变得更加细致和精确。

但是，由于产品代码有时可能会以在 JavaScript 中并不总是静态可检测到的方式打破 React 的规则，因此更改记忆化偶尔会产生意想不到的结果。例如，以前记忆的值可能用作组件树中某个位置的 useEffect 的依赖项。更改此值的记忆方式或记忆方式可能会导致该 useEffect 触发过度或不足。虽然鼓励仅将 useEffect 用于同步，但您的代码库可能具有涵盖其他用例的 useEffects，例如只需要在响应特定值更改时运行的效果。

换句话说，在极少数情况下，更改记忆可能会导致意外行为。因此，建议遵循 React 规则并对您的应用程序进行持续的端到端测试，以便您可以放心地升级编译器并识别任何可能导致问题的 React 违规规则。

如果您没有良好的测试覆盖率，建议将编译器固定到确切的版本（eg ）而不是 SemVer 范围（eg ）。您可以在升级编译器时通过传递（npm/pnpm）或 flags （yarn）来实现此目的。然后，您应该手动对编译器进行任何升级，并注意检查您的应用程序是否仍按预期工作。19.1.0^19.1.0--save-exact--exact