想必大家在写 React 时，都曾有过被useMemo、useCallback支配的恐惧，那一刻，你一定非常羡慕隔壁 Vue 的省心与优雅。

在写 Vue 代码时，你只需要关注逻辑；而写 React，不仅要关注逻辑，还要时时刻刻想着“这会不会引起不必要的更新，那会不会导致重新渲染”。

然而这次，React 团队直接“开挂”，给它装上了一套“自动驾驶系统”—— React Compiler。

React Compiler：真正的“开挂”玩家

React Compiler（原名 React Forget）不是一个库，而是一个底层的编译器插件。

它为我们带来了什么？

一句话：你只管像写普通 JS 一样写 React，剩下的性能优化，交给编译器。

这就意味着：

• 不再需要手动写 useMemo。
• 不再需要手动写 useCallback。
• 不再需要给组件套上一层 React.memo 。

React Compiler 目前是作为 Babel 插件形式，通过静态分析，自动识别哪些组件、哪些值需要被缓存。

使用 React Compiler 之前，你的代码是这样的：

import { useMemo, useCallback, memo } from 'react';

const MyComponent = memo(function MyComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data);
  }, [data]);

  const handleClick = useCallback((item) => {
    onClick(item.id);
  }, [onClick]);

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
});

使用 React Compiler 之后：

function MyComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);

  const handleClick = (item) => {
    onClick(item.id);
  };

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
}

这才是 React 代码原本应该有的样子，它更符合我们的编码直觉。useMemo、useCallback本来就是不应该普遍存在的玩意儿。

核心原理：它是怎么实现“黑魔法”的？

React Compiler 之所以能这么牛，是因为它引入了编译器层面的数据流分析。

它会将你的代码转换成一种叫 SSA（Static Single Assignment，静态单赋值） 的中间形式。在这个过程中，它能清晰地看到每一个变量的“前世今生”：

1. 它是从哪儿来的？
2. 它被谁改过？
3. 它最后去了哪儿？

通过这种深度的分析，Compiler 可以在编译阶段就能确定值的依赖关系，自动决定何时需要缓存（记忆化）计算结果。

安装与使用

React Compiler 是一个基于 Babel 的插件，因此你需要安装并作为 Babel 插件来使用。

npm install -D babel-plugin-react-compiler@latest

在 Babel 配置文件babel.config.js中使用：

module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // 必须首先运行！
    // ... 其他插件
  ],
  // ... 其他配置
};

React Compiler 要求你的 React 代码必须遵守React 规则，因此目前官方更推荐渐进式迁移，你可以决定它应用于哪些目录、哪些组件。

1. 指定应用于哪些目录？

// babel.config.js
module.exports = {
  plugins: [],
  overrides: [
    {
      test: './src/modern/**/*.{js,jsx,ts,tsx}',
      plugins: [
        'babel-plugin-react-compiler'
      ]
    }
  ]
};

2. 指定应用于哪些组件？

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation',
    }],
  ],
};

通过compilationMode: 'annotation'配置项开启词功能，然后在你的 React 组件开头加上"use memo"。

function Component({ items }) {
  "use memo";
  const filtered = items.filter(item => item.active);
  return <List items={filtered} />;
}

3. 支持运行时 A/B 测试

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      gating: {
        source: 'ReactCompilerFeatureFlags', // 功能标志模块的路径或名称
        importSpecifierName: 'isCompilerEnabled' // 导出的判断函数名
      }
    }],
  ],
};

然后在你配置的source文件中，导出isCompilerEnabled开关函数。

// ReactCompilerFeatureFlags.js
export function isCompilerEnabled() {
  // 在这里实现你的控制逻辑，例如：
  // - 从全局配置读取
  // - 检查当前用户是否在实验组
  // - 根据 URL 参数判断
  return window.featureFlags?.enableReactCompiler === true;
}

这个isCompilerEnabled开关函数需要你自己提供，非常适合做A/B 测试、灰度发布。

React vs Vue 设计哲学

说了这么多，React 这波儿不就是抄袭 Vue 早就实现的功能吗？

这里就要简单地介绍一下它们各自的设计哲学了。

• Vue 响应式：Vue 的哲学是“监听”，数据一动，对应的 DOM 自动更新。
• React 函数式：React 则始终坚持“UI = f(state)”这一理念。它希望组件就是一个纯净的函数，输入什么，输出什么。

React 宁愿去折腾复杂的编译器，也不愿引入像 Vue 那样响应式追踪，就是为了保证“函数的纯”和“数据的不可变性”。

写 React 就像是写 JS，而写 Vue 就是在写 Vue。

写在最后

React Compiler 的出现，让 React 的代码依然保持着纯函数的优雅，但却拥有“手动优化”的性能。

你现在还在坚持手动写 useMemo 吗？

---

🎉 知识小彩蛋

React 团队最初把这个项目命名为“React Forget”，意思是让开发者忘掉“手动优化”这件事情。