React 编译器正式登场

React 编译器（React Compiler）能自动分析组件、插入最优的 memoization，让开发者不再手写 useMemo 和 useCallback。

问题背景

传统 React 中，为了避免不必要的重渲染，开发者要手动优化：

function ProductList({ products, filter }) {
  const filtered = useMemo(
    () => products.filter(p => p.category === filter),
    [products, filter]
  );
  const handleClick = useCallback((id) => {
    console.log(id);
  }, []);
  return <List items={filtered} onClick={handleClick} />;
}

手写依赖数组容易出错，也增加心智负担。

编译器写法

启用编译器后，同样的逻辑直接写，无需手动优化：

function ProductList({ products, filter }) {
  const filtered = products.filter(p => p.category === filter);
  const handleClick = (id) => console.log(id);
  return <List items={filtered} onClick={handleClick} />;
}

编译器会在构建时自动分析依赖，插入等价的缓存逻辑，性能不降反升。

启用方式

npm install babel-plugin-react-compiler

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

React 编译器代表了 React 的重要方向：让开发者专注业务逻辑，性能优化交给工具。