一、从"React Forget"说起

React Compiler 最早由 Meta 工程师 黄玄 和 Joe Savona 主导，立项时的代号叫 "React Forget"。

这个名字取得很妙——"让开发者忘掉手动 memo 这件事"。

时间线的观点是，

• 立项Meta 内部实验
• React Conf首次公开演示
• May正式改名 React Compiler。开源 Beta
• Oct进入 Release Candidate
• 生产上线Instagram、Quest Store 等 Meta 全线产品上生产
• 现在React 环境推荐搭配使用

要理解它为什么值得单独发一个编译器，得先看它解决的痛。

二、痛点：手写 memo 三宗罪

开发者常被迫在每个组件里思考是否要手写 memo，导致认知负担和错误频出。

React 的默认渲染模型是“父 render → 子全部 render”。为了避免不必要的重渲染，开发者被迫手写：

const value = useMemo => computeExpensive,);const handler = useCallback => doSomething,);const MemoChild = memo;

这套 API 有三大罪状：

. 心智负担重

每写一个组件都要想：这里要不要 memo？依赖数组对不对，怎么说呢，props 稳定吗？很累，

. 容易写错

依赖数组漏一个变量 → stale closure。这种 bug 隐蔽、难查、生产环境才复现。

. 过度使用反而更慢

useMemo 本身有开销：

• 每次 render 都要读缓存对象
• 比较依赖数组
• 更新缓存槽

当计算本身比“比较 + 缓存”还便宜时memo 就是纯亏。

const sum = useMemo => a + b,);// 负调整
// a + b 一个 CPU 周期就算完。比较 还得读两次数组、比较两次值——
// 给一个 O 的加法套了一个更贵的判断，纯赔本。

三、React Compiler 的主要思路

一句话：开发者写“看起来每次都重算”的代码，编译器在建立时自动帮你插入等价的 memoization。

你写的 JSX ────► React Compiler ────► 调整后的 JS
───────────────────────

它本质是一个 Babel 插件,在建立时对函数组件和自定义 Hook 做静态分析&代码转换.

编译示例

源码：

function Profile {
const fullName = user.firstName + ' ' + user.lastName;const handleClick = => alert;return (


{fullName}

);}

编译后：

function Profile {
const $ = useMemoCache;// 分配一个缓存数组
let fullName;if {
fullName = user.firstName + ' ' + user.lastName;$ = user.firstName;$ = user.lastName;$ = fullName;} else {
fullName = $;话说回来，}
let handleClick;if {
handleClick = => alert;$ = fullName;其实，$ = handleClick;} else {
handleClick = $;}
// 连 JSX 本身也被缓存！let jsx，老实说，if {
jsx = (


{fullName}

);$ = /* ... */;$ = jsx，} else {
jsx = $;}
return jsx;}

关键点：# JSX 表达式本身会被缓存。这是手写 memo 几乎不会做的事——你不会给整个 return  语句包一层 useMemo,但编译器会。

四、内部原理：HIR 与数据流分析

The compiler pipeline looks like this:

JS/JSX 源码
▼ AST
▼ HIR
▼ 控制流分析
▼ 可变性分析— 哪些值会被修改
▼ 依赖分析— 每个值依赖哪些输入
▼ Reactive Scope 划分 — 哪些代码共享一个缓存槽
▼ 代码生成

The hardest part is **可变性分析**. Example:

function Foo {
const result =;items.forEach);话说回来，// result 是可变的
return ;}

The compiler must treat whole push‑loop as one “reactive scope”,recomputing only when items  changes.

五、避免负调整的主要规则

规则① Escape Analysis

#只有离开当前 render 范围的值才值得缓存。

• *作为 JSX 属性传给子组件*
• *作为 JSX children*
• *从组件/hook 返回*
• *传给 useEffect  依赖*
• *存进 ref、订阅回调等*

function Foo {
const count = items.length;// 本地用，不 memo
const doubled = count * 2;// 本地用，不 memo
const list = items.map;说起来，// 会传给子组件，需要 memo
console.log;return ;}

规则② Primitive 基本不 memo

• *原始类型比较本身极快*
• *不会导致子组件重新渲染*
• *缓存只会占用额外内存槽。收益几乎为零*

// 不需要单独 memo
const greeting = `Hello,${user.name}`;不过，// string
const isAdult = user.age>= 18;// boolean

#例外#：If primitive’s computation is expensive .toString) compiler may still memoize it.

规则③ Reactive Scope 合并

function Chart {
const xAxis = computeXAxis;const yAxis = computeYAxis;
按理说，const colors = pickColors;const legend = buildLegend;return ;}

The compiler groups values that share identical dependencies into a single cache slot,reducing comparison overhead from three checks to just one.

规则④ Dependency Pruning

const MULTIPLIER=10;//模块级常量

function Foo { const result=x*MULTIPLIER;// MULTIPLIER 不计入依赖 return;}

同理。import进来的函数、useState 的 setter、useRef 的 ref 对象，都被识别为“恒稳定”，不计入依赖。

规则⑤ 本地临时值不 memo

c onst filtered=items.filter;说起来，// 中间产物

c onst result=filtered.map;// 用完 filtered 就没了

r eturn;

filtered只在下一行用一次直接内联或与 result 合并进同一 Scope。

六、成

操作	相对成本
Primitive计算	极低
字符串拼接	低
对象/数组字面量	低
箭头函数	低
数组遍历	中～高
调用未知函数	高

七、手写 vs Compiler：对照实验

f unction Search { c onst trimmed=query.trim;c onst upperQuery=trimmed.toUpperCase;c onst filtered=users.filter);c onst handleClick==>console.log;r eturn，}

#新手手写版：# jsx const trimmed = useMemo => query.trim,);// ❌ 字符串操作太便宜 const upperQuery = useMemo => trimmed.toUpperCase,);// ❌ 同上 const filtered = useMemo => users.filter,);// ✅ 数组遍历值得 const handleClick = useCallback => ...,);老实说，// ✅ 函数引用值得

#Compiler 调整版：

jsx // cheap primitives → 不 mem o const trimmed=query.trim;const upperQuery=trimmed.toUpperCase;老实说，// array + downstream usage → mem o if{filtered=users.filter;老实说，} // function + downstream usage → mem o if{handleClick==>...;} // JSX also mem o if{jsx=

}

差异Compiler 跳过了对廉价 primitive 的 memo，避免负调整；为 JSX 添加了自动缓存，收益更高。

八、Rules of React：编译器安全前提

规则	违反例子
组件/Hook 必须是纯函数	render里改全局变量
Hook 必须遵循 Rules of Hooks	if useState td>
Ref只能在 effect/handler里读写	render里 ref.current++ td>

#如果检测到违规# 编译器会 宁可不调整，也不生成错误代码。配套的 eslint-plugin-react-compiler 会把这些检查前置到编辑器。按理说，

九、实际使用

/ 安装

npm install --save-dev babel-plugin-react-compiler npm install --save-dev eslint-plugin-react-compiler

#Vite 配置：

js import react from '@vitejs/plugin-react';export default { plugins: ] }。}),],}，

#Next.js 配置：

js module.exports={ experimental:{reactCompiler:true},};

/ 渐进式采纳

• "全量模式"所有组件都编译。
• "Opt‑in 模式":仅编译带 'use memo' 指令的组件。
• "Opt‑out 模式":默认编译，用 'use no memo' 跳过特定组件。jsx function Heavy{'use memo';/*...*/} function Legacy{'use no memo';/*...*/}

老项目迁移建议先全量跑一遍，看 lint 报错数量；无法立即修复的地方，用 'use no memo' 暂时关闭。

/ 实际收益

• useMemo / useCallback / memo。li>

/ 最受益场景

场景	收益
大列表	> 显著降低渲染次数 CPU 与内存使用下降 ~30%​ td>
复杂表单 大图表 / 可视化 td>​ td>
深度嵌套组件树 td>​ td>
静态展示页 td>​ td>

/ 十、和其他框架对比

| Vue | 编译期+运行时 | 节点级 | 根据数据调整 | | Solid.js | 编译期 signal | 信号级 | 手动追踪 | | Svelte | 编译期 DOM | 命令式指令 | 声明式 | | React + Compiler | 编译期表达式层 | 每次执行+自动缓存 | 保持 “函数每次重新执行” 思维 |

#React Compiler 独特之处# ：保留了 React 的函数式渲染模型。却通过编译期自动 cache，把性能提高逼近细粒度响应式方案。

/ 十一、局限与注意事项

• 只能调整 render —— 网络请求/IO 延迟仍需自行处理。
业务算法仍需关注 —— O 算法即使被 cache 包裹也慢。* 首次渲染提高有限 —— 主要收益在后续更新。* 仅支持函数组件与 Hook —— Class component 不受影响。* 额外内存开销 —— 每个组件分配缓存数组，在超长列表中需评估。* 代码规范要求严格 —— Violating Rules of React 会导致 optimizer 跳过。

/ 十二、给你的建议

1. 新项目直接开启 ：安装 Babel 插件 + eslint 插件，即可享受全自动 Memo 化。/li
2. 老项目先加 lint ：先确保所有文件符合 Rules of React，再打开 Compiler。/li
3. 忘掉 manual memo ：专注业务逻辑，让编译器负责性能细节。/li
4. 仍需 profile ：Compiler 并非银弹，对关键方法仍然使用 Profiler 找瓶颈。/li

方案	调整时机	更新粒度	心智模型

---