v19.2Latest

简介

React 编译器是一个新的构建时工具，可以自动优化你的 React 应用。它适用于纯 JavaScript，并且理解React 规则，因此你无需重写任何代码即可使用它。

你将学习
  • React 编译器的作用
  • 开始使用编译器
  • 增量采用策略
  • 出现问题时的调试与故障排除
  • 在你的 React 库中使用编译器

React 编译器有什么作用？

React 编译器在构建时自动优化你的 React 应用程序。React 通常无需优化就足够快，但有时你需要手动记忆化组件和值以保持应用的响应性。这种手动记忆化既繁琐又容易出错，还会增加需要维护的额外代码。React 编译器为你自动执行此优化，让你摆脱这种心智负担，从而专注于构建功能。

使用 React 编译器之前

在没有编译器的情况下，你需要手动记忆化组件和值来优化重新渲染：

注意

这种手动记忆化存在一个细微的错误，会破坏记忆化效果：

尽管 handleClick 被 useCallback包裹，但箭头函数() => handleClick(item) 在每次组件渲染时都会创建一个新函数。这意味着 Item总是会接收到一个新的onClick属性，从而破坏了记忆化。

React 编译器无论是否存在箭头函数，都能正确优化此代码，确保Item 仅在 props.onClick发生变化时才重新渲染。

使用 React 编译器之后

使用 React 编译器后，你可以编写相同的代码而无需手动记忆化：

在 React 编译器 Playground 中查看此示例

React 编译器会自动应用最优的记忆化策略，确保你的应用仅在必要时才重新渲染。

Deep Dive
React Compiler 添加了哪种类型的记忆化？

我应该尝试使用编译器吗？

我们鼓励大家开始使用 React Compiler。虽然编译器目前仍然是 React 的可选附加功能，但未来某些功能可能需要编译器才能完全工作。

使用它安全吗？

React Compiler 现已稳定，并已在生产环境中进行了广泛测试。虽然它已在 Meta 等公司的生产环境中使用，但将编译器推广到你的应用程序的生产环境将取决于你的代码库健康状况以及你遵循React 规则的程度。

支持哪些构建工具？

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

React Compiler 主要是一个围绕核心编译器的轻量级 Babel 插件包装器，其设计初衷是与 Babel 本身解耦。虽然编译器的初始稳定版本将主要保持为 Babel 插件，但我们正在与 swc 和oxc团队合作，为 React Compiler 构建一流的支持，这样你将来就不必再将 Babel 添加回你的构建管道中。

Next.js 用户可以通过使用 v15.3.1及更高版本来启用 swc 调用的 React Compiler。

我应该如何处理 useMemo、useCallback 和 React.memo？

默认情况下，React Compiler 将根据其分析和启发式方法对你的代码进行记忆化。在大多数情况下，这种记忆化将与你可能编写的代码一样精确，甚至更精确。

然而，在某些情况下，开发人员可能需要更多控制记忆化的能力。useMemo 和 useCallback钩子可以继续与 React Compiler 一起使用，作为控制哪些值被记忆化的逃生舱口。一个常见的用例是，当一个记忆化的值被用作 effect 依赖项时，以确保即使其依赖项没有发生有意义的变化，effect 也不会重复触发。

对于新代码，我们建议依赖编译器进行记忆化，并在需要实现精确控制时使用useMemo/useCallback。

对于现有代码，我们建议要么保留现有的记忆化（移除它可能会改变编译输出），要么在移除记忆化之前仔细测试。

尝试 React Compiler

本节将帮助你开始使用 React Compiler，并了解如何在你的项目中有效地使用它。

其他资源

除了这些文档，我们还建议查看 React 编译器工作组 以获取关于编译器的额外信息和讨论。

上一篇React 编译器下一篇安装