官方文档: react.dev/learn/react… 官方介绍: github.com/reactwg/rea…

安装

初始化一个 Next.js 项目:

yarn create next-app nextjs-canary

把 Next.js React 等包升级到需要的版本:

yarn add next@canary babel-plugin-react-compiler
yarn add react@19 react-dom@19

Next.js 可一键配置开启 babel-plugin-react-compiler :

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

export default nextConfig;

体验

"use client";

import Child from "./components/child";
import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState(1);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
        className="bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded"
      >
        + 1
      </button>
      <div>
        With state: count = {count}
        {console.log("With state")}
      </div>
      <div>
        Without state
        {console.log("Without state")}
      </div>
      <Child />
    </div>
  );
}

上述页面有4个部分:

1. button
2. 渲染 state 的 div
3. 没渲染 state 的 div
4. 没使用父组件状态的 Child

点击 button 看一下效果:

可以看到, 只有第 2 部分重新渲染了, 第 3, 4 部分没有.

效果类似于第 3 部分和第 4 部分分别用 React.memo 包了一下

实现原理

官方给了个 playground: React Compiler Playground, 可以看到代码经过 babel-plugin-react-compiler 编译过后的样子, 当然控制台的 source 面板也能看到:

编译后的代码不难理解, 简单概括就是:

• 对于没依赖 state 的块, 初始化之后, 每次渲染都从缓存读取;
• 对于依赖了 state 的块, 如果新的 state 和上次缓存的值不相等, 则重新渲染, 否则读取缓存

1. 初始化

function Home() {
  const $ = _c(9);
  ...

其中 _c 是 React Compiler 的一个 hook, 用来缓存组件块及其依赖, 代码大致是这样:

const $empty = Symbol.for("react.memo_cache_sentinel");
export function c(size: number) {
  return React.useState(() => {
    const $ = new Array(size);
    for (let ii = 0; ii < size; ii++) {
      $[ii] = $empty;
    }
    // @ts-ignore
    $[$empty] = true;
    return $;
  })[0];
}

官方介绍: The memo cache function

传给 _c 的 size 由组件的复杂度决定: 比如 <Child /> 是一个没有依赖的块, 在 $ 中占用一个位置; <div>{count}</div> 则依赖了一个 count , 组件缓存占用一个位置, 依赖缓存占用一个位置; 最后, 最外层的 <div> 依赖了第一部分的 <button> 和第二部分带 count 的 <div> , 这两个依赖占用 2 个位置.

所有加起来就是初始化的 _c(9) .

2. 缓存比较

先看看没有依赖的 <Child/> :

let t3;

if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
  t3 = <Child />;
  $[5] = t3;
} else {
  t3 = $[5];
}

如果没有初始化过, 即缓存值等于初始值( $[5] === Symbol.for("react.memo_cache_sentinel") ), 则初始化组件并缓存; 否则直接读取缓存 $[5] .

再看看依赖 count 的部分:

if ($[2] !== count) {
  t1 = (
    <div>
      With state: count = {count}
      {console.log("With state")}
    </div>
  );
  $[2] = count;
  $[3] = t1;
} else {
  t1 = $[3];
}

如果依赖变了( $[2] !== count ), 则重新渲染这部分并缓存新的依赖以及渲染结果; 否则直接读取缓存 $[3] .

button 块和另一个无依赖块同理.

然后, 这 4 块共同组成了父块 t4 :

let t4;

if ($[6] !== t0 || $[7] !== t1) {
  t4 = (
    <div>
      {t0}
      {t1}
      {t2}
      {t3}
    </div>
  );
  $[6] = t0;
  $[7] = t1;
  $[8] = t4;
} else {
  t4 = $[8];
}

而 t4 的 2 个子块 t0 和 t1 是有状态的, 同样需要对比并缓存.

最后, t4 就是这个组件最大的块, return t4