渐进式采用

React Compiler 可以渐进式采用，允许您先在代码库的特定部分试用。本指南将向您展示如何在现有项目中逐步推广编译器。

为何采用渐进式？

React Compiler 旨在自动优化您的整个代码库，但您无需一次性全部采用。渐进式采用让您能控制推广过程，允许您在扩展到应用其余部分之前，先在小部分代码上测试编译器。

从小处着手有助于您建立对编译器优化的信心。您可以验证应用在使用编译代码后行为是否正确，衡量性能改进，并识别代码库特有的任何边界情况。这种方法对于稳定性至关重要的生产应用尤其有价值。

渐进式采用也使处理编译器可能发现的 React 规则违规变得更容易。您无需一次性修复整个代码库的违规，而是可以在扩展编译器覆盖范围时系统地处理它们。这使得迁移更易于管理，并降低了引入错误的风险。

通过控制代码的哪些部分被编译，您还可以运行 A/B 测试来衡量编译器优化在现实世界中的影响。这些数据有助于您就全面采用做出明智决策，并向团队展示其价值。

渐进式采用的方法

主要有三种方法可以渐进式采用 React Compiler：

1. Babel overrides - 将编译器应用于特定目录
2. 使用 "use memo" 选择性加入 - 仅编译明确选择加入的组件
3. 运行时门控 - 使用功能标志控制编译

所有方法都允许您在全面推广之前，在应用的特定部分测试编译器。

使用 Babel Overrides 实现基于目录的采用

Babel 的overrides选项允许您将不同的插件应用于代码库的不同部分。这非常适合按目录逐步采用 React Compiler。

基本配置

首先将编译器应用于特定目录：

扩展覆盖范围

随着您信心的增强，添加更多目录：

使用编译器选项

您还可以为每个 override 配置编译器选项：

使用 "use memo" 的选择性加入模式

为了获得最大控制权，您可以使用compilationMode: 'annotation'，仅编译那些明确使用 "use memo"指令选择加入的组件和钩子。

注解模式配置

使用指令

在您想要编译的函数开头添加"use memo"：

使用compilationMode: 'annotation'时，你必须：

• 为你想要优化的每个组件添加"use memo"
• 为每个自定义 Hook 添加"use memo"
• 记得为新组件添加它

这让你可以精确控制哪些组件被编译，同时评估编译器的影响。

使用门控的运行时功能标志

gating选项让你能够使用功能标志在运行时控制编译。这对于运行 A/B 测试或根据用户群体逐步推出编译器非常有用。

门控如何工作

编译器将优化后的代码包装在一个运行时检查中。如果门控函数返回true，则运行优化版本。否则，运行原始代码。

门控配置

实现功能标志

创建一个导出你的门控函数的模块：

排查采用问题

如果在采用过程中遇到问题：

1. 使用"use no memo" 临时排除有问题的组件
2. 查看 调试指南了解常见问题
3. 修复 ESLint 插件识别的 React 规则违规
4. 考虑使用 compilationMode: 'annotation'以更渐进的方式采用

后续步骤

• 阅读 配置指南了解更多选项
• 了解 调试技巧
• 查看 API 参考获取所有编译器选项