React Compiler 正式落地一年：告别手动 useMemo/useCallback 的全栈实践

! $封面$ (https://picsum.photos/seed/178573765850/800/400)

2025 年 10 月 7 日，React 官方发布 React Compiler 1.0；一年后的今天，它已经成为 Next.js 16、Vite、Expo 的默认配置。曾经靠 `useMemo`、`useCallback`、`React.memo` 手动优化的时代，正在被"编译器自动记忆化"全面取代。

一、为什么我们需要它：手动 memo 的痛点

写过中大型 React 应用的开发者都懂这种痛：为了减少不必要的重渲染，你要在代码里到处埋 `useMemo`、`useCallback`、`React.memo`。稍不留神，依赖数组写错，还会引入诡异难查的 bug------缓存了不该缓存的值，或者该缓存的反而不缓存。

看一个典型的列表组件：

tsx 复制代码

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

const Item = memo(function Item({ item, onToggle }: {
  item: { id: number; text: string; done: boolean };
  onToggle: (id: number) => void;
}) {
  return (
    <li onClick={() => onToggle(item.id)} style={{ textDecoration: item.done ? 'line-through' : 'none' }}>
      {item.text}
    </li>
  );
});

export function TodoList({ todos }: { todos: { id: number; text: string; done: boolean }[] }) {
  const visibleTodos = useMemo(
    () => todos.filter((t) => !t.done),
    [todos]
  );

  const handleToggle = useCallback((id: number) => {
    console.log('toggle', id);
  }, []);

  return <ul>{visibleTodos.map((item) => <Item key={item.id} item={item} onToggle={handleToggle} />)}</ul>;
}

这段代码的每个 memo 都是"人肉编译器"在工作：判断依赖、决定缓存策略。这恰恰是编译器最擅长的事------把规则写死、分析数据流、在构建期自动完成。而且手动 memo 还有一个致命问题：它的正确性完全依赖开发者的自觉，你漏写一个，性能就悄悄劣化；你写错一个依赖，bug 就悄悄出现。

二、React Compiler 是什么

React Compiler 是一个自动记忆化优化编译器。它不改变 React 的编程模型，而是把你的组件代码编译成"已经手动优化好"的样子------自动对组件和 Hook 中的值进行细粒度记忆化，包括 JSX 本身。

它的工作原理与传统 Babel 插件不同：编译器先把 Babel 提供的 AST 降级成自己设计的 HIR（High-level Intermediate Representation，高层中间表示） ，再通过多轮编译 pass 仔细分析数据流（data-flow）和代码可变性（mutability），判断哪些值在渲染中真正依赖、哪些可以安全缓存。简单说：你在运行时靠 hook 做的事，它搬到了构建时靠静态分析完成。

bash 复制代码

源代码 → Babel AST → HIR → 多轮分析 pass（数据流/可变性）→ 自动插入记忆化 → 优化后的 JS

官方在 1.0 博客中明确建议：升级 `eslint-plugin-react-hooks` 到最新版，因为编译器相关的 ESLint 规则已经合并进了该插件的 `recommended` 预设（原独立的 `eslint-plugin-react-compiler` 已弃用）。lint 规则不需要安装编译器本体就能运行，零风险，建议所有人今天就升级。

三、快速接入：Next.js 16 与 Vite 8

2026 年的新项目几乎不用额外配置。Next.js 16 默认开启 React Compiler；Vite 生态则需要留意一个关键变化：`@vitejs/plugin-react` v6 抛弃了 Babel，改用 oxc（Rust 实现）做 JSX 转换和 Fast Refresh，因此老写法 `react({ babel: { plugins: $...$ } })` 不再生效，Babel 系的插件需要借助 `@rolldown/plugin-babel` 接入。

bash 复制代码

npm i -D @vitejs/plugin-react @rolldown/plugin-babel babel-plugin-react-compiler

ts 复制代码

// vite.config.ts ------ 2026 年 Vite 8 的正确姿势
import react from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    babel({
      babelPlugins: ['babel-plugin-react-compiler'],
    }),
    react(),
  ],
});

ESLint 侧更简单，规则已在 `eslint-plugin-react-hooks` v7 的 recommended 预设里：

ts 复制代码

// eslint.config.js (Flat Config)
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
]);

配置完跑一遍 `npx react-compiler-healthcheck`，它会扫描你的代码库，告诉你哪些文件存在编译器无法处理的写法，以及潜在的错误模式。

四、实战对比：编译器做了什么

接上文的 TodoList，开启 React Compiler 后，你只需要写最朴素、最直白的版本，剩下的交给编译器：

tsx 复制代码

export function TodoList({ todos }: { todos: Todo[] }) {
  const visibleTodos = todos.filter((t) => !t.done);

  const handleToggle = (id: number) => {
    console.log('toggle', id);
  };

  return (
    <ul>
      {visibleTodos.map((item) => (
        <li key={item.id} onClick={() => handleToggle(item.id)} style={{ textDecoration: item.done ? 'line-through' : 'none' }}>
          {item.text}
        </li>
      ))}
    </ul>
  );
}

注意，这里没有 `useMemo`、没有 `useCallback`、没有 `memo`------编译器会在构建期自动：

对 `visibleTodos` 做记忆化，仅在 `todos` 变化时重算；
对 `handleToggle` 做记忆化，保证引用稳定；
对 JSX 做记忆化，让 `todos` 未变时整棵子树直接复用；
对列表项 `

` 自动做类似 `memo` 的粒化处理。

这意味着：性能优化的正确性从"开发者自觉"变成了"编译器的确定性行为"。团队里新来的同学哪怕完全不懂 memo，写出来的代码性能也不会差。

五、注意事项与逃生舱

编译器不是魔法，它要求你的代码遵守 Rules of React（不修改 props/state、组件保持纯函数、不滥用 ref 等）。为此官方把 `eslint-plugin-react-hooks` 的规则从 `warn` 提升到 `error` 是不少团队的迁移第一步。

如果你的某处代码确实需要绕过编译器（比如某个高频更新的第三方组件内部有特殊模式），可以用指令级逃生舱：

tsx 复制代码

"use no memo"; // 文件顶部：整个文件关闭自动记忆化

function ThirdPartyHeavyComponent() {
  // 这里保持手写 useMemo/useCallback 的旧模式
}

迁移策略上，社区的主流共识是：新项目直接开启；存量项目先把 lint 规则提到 error 修完违规代码，再渐进开启，实在改不动的老代码用 `"use no memo"` 兜底。React 团队在 1.0 发布时也强调，编译器会持续优化，即使你的代码已经手动 memo 过，开启后依然可能获得额外收益------因为编译器能看到人眼容易忽略的粒化机会。

六、总结

回看 2026 年的前端技术版图：服务端组件（RSC）解决了数据获取的边界问题，React Compiler 解决了性能优化的心智负担问题，两者合力，把 React 全栈开发推向"写直觉代码，拿最优性能"的新常态。正如社区里那句调侃：2026 年再看到 `useMemo`，就像看到手写 for 循环实现数组 map------能用，但你已经有了更好的工具。

前端开发的演进从来不是"消灭某种写法"，而是"把某种写法从必修课降级为冷知识"。React Compiler 做到的正是这件事：让性能优化回归编译器，让开发者回归业务。如果你还没升级，今天就是最好的时机------先升级 `eslint-plugin-react-hooks` 跑一遍 lint，零成本，收益立现。