React Compiler
React Compiler 是 React 团队推出的一款实验性编译器，旨在通过自动化手段彻底解决 React 应用中的性能优化难题。
是什么
React Compiler（曾用名 React Forget）是一个**构建时（Build-time）**工具。它通过静态分析你的 React 代码，自动为组件和 Hook 添加 memoization（内存化/缓存）。
核心目标
- 消除手动优化：不再需要手动编写
useMemo、useCallback和React.memo。 - 保持“响应式”：确保 UI 只在相关数据真正变化时才重新渲染。
- 心智负担降级：让开发者专注于业务逻辑，而不是如何规避不必要的渲染。
怎么用
目前 React Compiler 已经随 React 19 进入测试阶段，你可以通过以下步骤将其集成到项目中。
1. 技术栈要求
- React 19：原生支持，无需额外配置。
- React 17 / 18：最低支持到 17.0.0。但需要额外安装
react-compiler-runtime包作为依赖，以提供旧版本的运行时支持。 - 使用了 Babel 或支持 Babel 插件的项目（如 Vite、Next.js）。
2. 安装编译器插件
pnpm add -D babel-plugin-react-compiler eslint-plugin-react-compiler
# 如果 React 版本低于 19，还需安装运行时适配包
pnpm add react-compiler-runtime
3. 环境检测
在正式使用前，建议运行健康检查工具来评估项目的兼容性：
npx react-compiler-healthcheck@latest
4. 项目配置 (以 Vite 为例)
修改 vite.config.ts：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
['babel-plugin-react-compiler', { target: '19' }],
],
},
}),
],
})
注意点
虽然编译器非常智能，但它依赖于某些假设，因此你需要遵循以下原则：
1. 严格遵守 React 规则 (Rules of React)
编译器假定你的代码是“合法”的 React 代码。以下行为会导致优化失效甚至出错：
- 不要在循环或条件语句中调用 Hook。
- 不要直接修改 Props 或 State（保持数据不可变性）。
- 不要在渲染函数中产生副作用（如修改全局变量）。
2. 逃生舱："use no memo"
如果你发现某个特定的组件因为特殊原因不适合被自动优化，可以在文件顶部或函数顶部添加指令：
function MySpecialComponent() {
'use no memo'
// 此时编译器将跳过该组件
}
3. 配合 ESLint 插件
强烈建议安装 eslint-plugin-react-compiler。它会在开发阶段实时提醒你哪些代码违反了编译器的优化规则。
原理
React Compiler 的工作原理类似于一个高级的 JavaScript 引擎优化器，但它专门针对 React 的语义进行了定制。
工作流 (Pipeline)
- AST 解析：将源代码解析为抽象语法树。
- HIR 转换：将 AST 转换为 HIR (High-level Intermediate Representation)。HIR 比 AST 更清晰地表达了代码的控制流（循环、分支）和数据流。
- SSA 分析：使用 SSA (Static Single Assignment) 静态单赋值形式进行分析，追踪每一个变量的定义和使用周期。
- Reactive Scopes 识别：这是核心步骤。编译器会自动识别哪些代码块构成了“响应式作用域”，并根据输入（Props/State）计算依赖项。
- 代码生成：根据分析结果，在最终生成的 JS 代码中注入缓存逻辑（类似自动生成的
useMemo）。
结果示例 (编译前后对比)
为了更好地理解，我们来看一个简单的组件在编译前后的差异。
编译前 (原始代码)：
function FriendList({ friends }) {
const onlineCount = useFriendOnlineCount();
return (
<div className="friend-list">
<h1>Online: {onlineCount}</h1>
{friends.map(f => <Friend key={f.id} friend={f} />)}
</div>
);
}
编译后 (等效逻辑)：
编译器会生成类似下方的代码，使用内部的缓存机制（通常称为 _c 或 useMemoCache）来存储结果：
function FriendList(t0) {
const $ = _c(4); // 初始化 4 个缓存槽位
const { friends } = t0;
const onlineCount = useFriendOnlineCount();
// 1. 自动缓存渲染出的 h1 标题
let t1;
if ($[0] !== onlineCount) {
t1 = <h1>Online: {onlineCount}</h1>;
$[0] = onlineCount;
$[1] = t1;
} else {
t1 = $[1];
}
// 2. 自动缓存整个列表及外层 div
let t2;
if ($[2] !== friends || $[0] !== onlineCount) {
t2 = (
<div className="friend-list">
{t1}
{friends.map(f => <Friend key={f.id} friend={f} />)}
</div>
);
$[2] = friends;
$[3] = t2;
} else {
t2 = $[3];
}
return t2;
}
为什么它比我们手写的更强？
- 细粒度缓存：它可以为每一行表达式单独做缓存，而我们手写
useMemo通常只能粗粒度地包裹整个对象或函数。 - 语义理解：它理解 React 的核心语义（如不可变性），能够比通用编译器做出更大胆且安全的假设。
额外的思考
React 一直将纯粹的 JS 作为卖点，增加 Compiler 后，我们写的组件与真正运行的组件可能会有很大的差异。这是否意味着 React 正在离其“纯粹 JavaScript”的初衷越来越远？
其实恰恰相反。React Compiler 的出现，是为了让 React 的开发体验回归到更纯粹的 JavaScript。
在没有 Compiler 的时代，为了追求性能，我们不得不违背直觉地在代码中大量填充 useMemo、useCallback 和 React.memo。这些“性能补丁”不仅增加了代码的冗余，更破坏了 JavaScript 逻辑的连贯性——开发者在写每一行数据处理逻辑时，脑子里都得绷着一根弦：“这个引用是否会变？”、“我是不是漏掉了依赖项？”。
这种负担，本质上是对 React “手动挡”性能优化的妥协。
有了 Compiler 后，虽然编译后的产物变得复杂了（就像 V8 引擎会对你的 JS 进行大量 JIT 优化一样），但你手写的代码却变简单了。你可以重新像写普通 JavaScript 一样去写 React：
- 不再纠结缓存：不需要再到处包裹
useMemo。 - 不再心累引用：不需要再为了防止子组件重渲染而强行
useCallback。 - 返璞归真：你可以把精力完全放在业务逻辑的表达上。
这标志着 React 从“开发者负责优化”转向了“框架负责优化”。
正如我们现在不会去关心 Babel 是如何把 ES6 转换成 ES5 的，未来我们也无需关心 React Compiler 是如何做缓存的。它将这种机械、重复且易出错的优化工作从人类大脑移交给了算法，让我们能把 100% 的精力放回业务逻辑本身。
React 依然是那个 JavaScript 框架，只是它变得更加聪明，让你不再需要为了性能而写出“非人”的代码。通过这种“魔法”，React 实际上完成了一次向 JavaScript 原始心智模型的回归。