React Compiler

告别手动优化，自动记忆化的新时代

1. 为什么需要 React Compiler？

1.1 手动优化的痛点

jsx

// 开发者每天的灵魂拷问
function ProductList({ products, onSelect, filter }) {
    // 🤔 这个需要 useMemo 吗？
    const filteredProducts = products.filter(p => p.category === filter);
    
    // 🤔 这个需要 useCallback 吗？
    const handleClick = (id) => {
        onSelect(id);
        trackClick(id);
    };
    
    // 🤔 子组件需要 memo 吗？
    return filteredProducts.map(p => (
        <ProductCard key={p.id} product={p} onClick={handleClick} />
    ));
}

1.2 常见问题

问题	表现
过度优化	到处都是 useMemo/useCallback，代码臃肿
优化遗漏	该加的没加，性能问题难定位
依赖错误	依赖数组遗漏导致 Bug
心智负担	时刻思考"需不需要优化"

1.3 React 团队的思考

"如果 React 能自动做这些优化就好了..."

React Compiler 就是这个答案——编译时自动分析依赖，自动插入记忆化。

2. React Compiler 是什么？

2.1 核心概念

React Compiler（原名 React Forget）是一个编译器，在构建时分析 React 代码，自动添加优化。

┌─────────────────────────────────────────────────┐
│            React Compiler 工作流程               │
├─────────────────────────────────────────────────┤
│                                                 │
│  源代码                                         │
│     │                                           │
│     ▼                                           │
│  ┌─────────────────────────────┐               │
│  │      React Compiler          │               │
│  │  ├── 静态分析依赖            │               │
│  │  ├── 识别纯计算              │               │
│  │  └── 自动插入记忆化          │               │
│  └─────────────────────────────┘               │
│     │                                           │
│     ▼                                           │
│  优化后代码 (自动带 memo)                        │
│                                                 │
└─────────────────────────────────────────────────┘

2.2 编译前后对比

编译前（你写的代码）：

jsx

function ProductCard({ product, onClick }) {
    const discount = product.price * 0.1;
    
    const handleClick = () => {
        onClick(product.id);
    };
    
    return (
        <div onClick={handleClick}>
            <h3>{product.name}</h3>
            <p>Price: ${product.price}</p>
            <p>Discount: ${discount}</p>
        </div>
    );
}

编译后（Compiler 生成）：

jsx

function ProductCard({ product, onClick }) {
    const $ = _c(4);  // 缓存数组
    
    let discount;
    if ($[0] !== product.price) {
        discount = product.price * 0.1;
        $[0] = product.price;
        $[1] = discount;
    } else {
        discount = $[1];
    }
    
    let handleClick;
    if ($[2] !== onClick || $[3] !== product.id) {
        handleClick = () => onClick(product.id);
        $[2] = onClick;
        $[3] = product.id;
    } else {
        handleClick = $[4];
    }
    $[4] = handleClick;
    
    // ... 渲染逻辑也会被优化
}

3. 工作原理

3.1 静态分析

Compiler 分析每个值的依赖关系：

jsx

function Component({ a, b }) {
    // x 依赖于 a
    const x = compute(a);
    
    // y 依赖于 a 和 b
    const y = compute2(a, b);
    
    // handler 依赖于 x
    const handler = () => console.log(x);
    
    return <Child value={y} onClick={handler} />;
}

依赖图:
  a ──→ x ──→ handler
  │
  └──→ y
  b ──┘

3.2 细粒度记忆化

jsx

// Compiler 识别出：
// - x 只依赖 a，a 不变则 x 不重算
// - y 依赖 a 和 b
// - handler 依赖 x
// 
// 自动生成最优的缓存策略

3.3 与 useMemo/useCallback 的区别

对比项	useMemo/useCallback	React Compiler
优化时机	运行时	编译时
依赖分析	手动指定	自动分析
粒度	整个表达式	更细粒度
错误可能	依赖数组写错	不会出错

4. 使用方法

4.1 安装配置 (Next.js 15+)

javascript

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

4.2 Babel 插件方式

javascript

// babel.config.js
module.exports = {
    plugins: [
        ['babel-plugin-react-compiler', {
            // 配置选项
        }],
    ],
};

4.3 渐进式迁移

jsx

// 可以用指令跳过特定组件
function LegacyComponent() {
    'use no memo';  // 跳过这个组件的优化
    
    // ...
}

5. Compiler 的规则

5.1 React 的规则

Compiler 假设你的代码遵循 React 的规则：

jsx

// ✅ 正确：组件是纯函数
function Good({ value }) {
    return <div>{value * 2}</div>;
}

// ❌ 错误：有副作用
function Bad({ value }) {
    globalCounter++;  // 副作用！
    return <div>{value}</div>;
}

// ❌ 错误：修改 props
function Bad2({ user }) {
    user.name = 'hacked';  // 修改了输入！
    return <div>{user.name}</div>;
}

5.2 Hooks 规则

jsx

// ✅ Hooks 必须在顶层调用
function Good() {
    const [count, setCount] = useState(0);
    return <div>{count}</div>;
}

// ❌ 条件调用 Hooks
function Bad({ condition }) {
    if (condition) {
        const [count, setCount] = useState(0);  // 错误！
    }
}

5.3 ESLint 插件

javascript

// eslint.config.js
import reactCompiler from 'eslint-plugin-react-compiler';

export default [
    {
        plugins: {
            'react-compiler': reactCompiler,
        },
        rules: {
            'react-compiler/react-compiler': 'error',
        },
    },
];

6. 迁移指南

6.1 检查现有代码

需要注意的模式：

jsx

// 1. 外部可变变量
let globalCount = 0;
function Component() {
    globalCount++;  // ❌ Compiler 无法追踪
}

// 2. ref 的不当使用
function Component() {
    const ref = useRef({ count: 0 });
    ref.current.count++;  // ⚠️ 可能导致问题
    return <div>{ref.current.count}</div>;
}

// 3. 非幂等的计算
function Component() {
    const id = Math.random();  // ❌ 每次不同
}

6.2 修复常见问题

jsx

// ❌ 问题：依赖外部可变状态
let cache = {};
function Component({ id }) {
    if (!cache[id]) {
        cache[id] = compute(id);
    }
    return <div>{cache[id]}</div>;
}

// ✅ 修复：使用 useMemo 或 state
function Component({ id }) {
    const value = useMemo(() => compute(id), [id]);
    return <div>{value}</div>;
}

6.3 渐进式启用

javascript

// next.config.js - 只对部分路径启用
module.exports = {
    experimental: {
        reactCompiler: {
            compilationMode: 'annotation',  // 只编译标记的组件
        },
    },
};

jsx

// 标记需要优化的组件
'use memo';
function OptimizedComponent() {
    // ...
}

7. 对现有代码的影响

7.1 useMemo/useCallback 还需要吗？

短期：保留，Compiler 会智能跳过已优化的代码长期：大部分可以移除

jsx

// 现有代码
const memoized = useMemo(() => expensive(a, b), [a, b]);

// Compiler 会识别并跳过，或生成更优的版本

7.2 memo() 还需要吗？

jsx

// memo() 在 Compiler 模式下通常不需要
const MemoizedComponent = memo(function Component(props) {
    // ...
});

// Compiler 会自动处理组件的记忆化

7.3 性能对比

┌─────────────────────────────────────────────────┐
│              性能测试结果 (React 团队)            │
├─────────────────────────────────────────────────┤
│                                                 │
│  Instagram 主页:                                │
│  └── 重渲染减少 12%                             │
│                                                 │
│  Meta 内部应用:                                 │
│  └── 交互延迟减少 8-15%                         │
│                                                 │
│  测试应用:                                      │
│  └── 与手动优化性能相当                          │
│                                                 │
└─────────────────────────────────────────────────┘

8. 调试与工具

8.1 React DevTools 支持

React DevTools 会显示:
- 哪些组件被 Compiler 优化
- 缓存命中/未命中情况
- 优化前后的渲染次数对比

8.2 查看编译输出

bash

# 查看编译后的代码
npx react-compiler --show-output src/Component.tsx

8.3 调试技巧

jsx

// 使用 'use no memo' 临时禁用，对比性能
function DebugComponent() {
    'use no memo';
    // ...
}

9. 面试高频问题

Q1: React Compiler 和 useMemo 的关系？

答：React Compiler 可以自动做 useMemo/useCallback 做的事情，而且更精确（编译时静态分析 vs 运行时依赖数组）。长期来看，大部分手动优化代码可以移除，但短期内可以共存，Compiler 会智能处理。

Q2: React Compiler 的优势是什么？

答：

消除心智负担：不用思考"需不需要优化"
不会出错：编译时分析，不存在依赖数组遗漏
更细粒度：可以在表达式级别优化
无运行时开销：优化在编译时完成

Q3: React Compiler 对代码有什么要求？

答：代码必须遵循 React 规则：

组件和 Hooks 必须是纯函数
不能修改 props 或 state
Hooks 必须在顶层调用
不能依赖外部可变变量

Q4: 现有项目如何迁移到 React Compiler？

答：

先用 ESLint 插件检查代码规范
修复不符合规范的代码
渐进式启用（先部分组件，再全量）
保留现有的 useMemo/useCallback，让 Compiler 逐步接管

Q5: React Compiler 什么时候正式发布？

答：React Compiler 已在 Meta 内部大规模使用。React 19 开始可以在生产环境使用，Next.js 15 已支持实验性开启。预计 2025 年会成为 React 的默认行为。

React Compiler ​

1. 为什么需要 React Compiler？ ​

1.1 手动优化的痛点 ​

1.2 常见问题 ​

1.3 React 团队的思考 ​

2. React Compiler 是什么？ ​

2.1 核心概念 ​

2.2 编译前后对比 ​

3. 工作原理 ​

3.1 静态分析 ​

3.2 细粒度记忆化 ​

3.3 与 useMemo/useCallback 的区别 ​

4. 使用方法 ​

4.1 安装配置 (Next.js 15+) ​

4.2 Babel 插件方式 ​

4.3 渐进式迁移 ​

5. Compiler 的规则 ​

5.1 React 的规则 ​

5.2 Hooks 规则 ​

5.3 ESLint 插件 ​

6. 迁移指南 ​

6.1 检查现有代码 ​

6.2 修复常见问题 ​

6.3 渐进式启用 ​

7. 对现有代码的影响 ​

7.1 useMemo/useCallback 还需要吗？ ​

7.2 memo() 还需要吗？ ​

7.3 性能对比 ​

8. 调试与工具 ​

8.1 React DevTools 支持 ​

8.2 查看编译输出 ​

8.3 调试技巧 ​

9. 面试高频问题 ​

Q1: React Compiler 和 useMemo 的关系？ ​

Q2: React Compiler 的优势是什么？ ​

Q3: React Compiler 对代码有什么要求？ ​

Q4: 现有项目如何迁移到 React Compiler？ ​

Q5: React Compiler 什么时候正式发布？ ​

React Compiler

1. 为什么需要 React Compiler？

1.1 手动优化的痛点

1.2 常见问题

1.3 React 团队的思考

2. React Compiler 是什么？

2.1 核心概念

2.2 编译前后对比

3. 工作原理

3.1 静态分析

3.2 细粒度记忆化

3.3 与 useMemo/useCallback 的区别

4. 使用方法

4.1 安装配置 (Next.js 15+)

4.2 Babel 插件方式

4.3 渐进式迁移

5. Compiler 的规则

5.1 React 的规则

5.2 Hooks 规则

5.3 ESLint 插件

6. 迁移指南

6.1 检查现有代码

6.2 修复常见问题

6.3 渐进式启用

7. 对现有代码的影响

7.1 useMemo/useCallback 还需要吗？

7.2 memo() 还需要吗？

7.3 性能对比

8. 调试与工具

8.1 React DevTools 支持

8.2 查看编译输出

8.3 调试技巧

9. 面试高频问题

Q1: React Compiler 和 useMemo 的关系？

Q2: React Compiler 的优势是什么？

Q3: React Compiler 对代码有什么要求？

Q4: 现有项目如何迁移到 React Compiler？

Q5: React Compiler 什么时候正式发布？