React 编译器

了解如何在 Expo 应用中启用和使用 React Compiler。

警告：React Compiler 是实验性的。目前，它处于暂停状态，我们将很快提供有关其使用的更多更新。

新的 React 编译器会自动记忆组件和钩子以实现细粒度的反应性。这可以显著提高你的应用的性能。React Compiler 目前处于实验阶段，默认情况下未启用。你可以按照以下说明在你的应用中启用它。

¥The new React Compiler automatically memoizes components and hooks to enable fine-grained reactivity. This can lead to significant performance improvements in your app. The React Compiler is currently experimental and is not enabled by default. You can enable it in your app by following the instructions below.

启用 React 编译器

¥Enabling React Compiler

检查兼容性你的项目带有 React 编译器。

¥Check how compatible your project is with the React Compiler.

Terminal

- npx react-compiler-healthcheck@latest

这通常会验证你的应用是否遵循查看项目的 README。

¥This will generally verify if your app is following the rules of React.

在你的项目中安装 babel-plugin-react-compiler 和 React 编译器运行时：

¥Install babel-plugin-react-compiler and the React compiler runtime in your project:

Terminal

- npx expo install babel-plugin-react-compiler react-compiler-runtime@beta

在应用配置文件中启用 React Compiler 实验：

¥Toggle on the React Compiler experiment in your app config file:

app.json

{
"experiments": {
  "reactCompiler": true
}
}

启用 linter

¥Enabling the linter

将来，以下所有步骤都将由 Expo CLI 自动执行。

¥In the future, all of the following steps below will be automated by Expo CLI.

此外，你应该使用 ESLint 插件在你的项目中持续执行 React 规则。

¥Additionally, you should use the ESLint plugin to continuously enforce the rules of React in your project.

运行 npx expo lint 以确保你的应用中设置了 ESLint，然后为 React Compiler 安装 ESLint 插件：

¥Run npx expo lint to ensure ESLint is setup in your app, then install the ESLint plugin for React Compiler:

Terminal

- npx expo install eslint-plugin-react-compiler

更新你的 ESLint 配置以包含插件：

¥Update your ESLint configuration to include the plugin:

.eslintrc.js

// https://expo.nodejs.cn/guides/using-eslint/
module.exports = {
extends: 'expo',
plugins: ['eslint-plugin-react-compiler'],
rules: {
  'react-compiler/react-compiler': 'error',
},
};

增量采用

¥Incremental adoption

你可以使用一些策略在你的应用中逐步采用 React 编译器：

¥You can incrementally adopt the React Compiler in your app using a few strategies:

将 Babel 插件配置为仅在特定文件或组件上运行。去做这个：

¥Configure the Babel plugin to only run on specific files or components. To do this:

如果你的项目没有 babel.config.js，请通过运行 npx expo customize babel.config.js 创建一个。

¥If your project doesn't have babel.config.js, create one by running npx expo customize babel.config.js.
将以下配置添加到 babel.config.js：

¥Add the following configuration to babel.config.js:

babel.config.js

module.exports = function (api) {
api.cache(true);

return {
  presets: [
    [
      'babel-preset-expo',
      {
        'react-compiler': {
          sources: filename => {
            // Match file names to include in the React Compiler.
            return filename.includes('src/path/to/dir');
          },
        },
      },
    ],
  ],
};
};

每当你更改 babel.config.js 文件时，都需要重新启动 Metro 打包程序以应用更改：

¥Whenever you change your babel.config.js file, you need to restart the Metro bundler to apply the changes:

Terminal

- npx expo start --clear

使用 "use no memo" 指令选择退出特定组件或文件的 React 编译器。

¥Use the "use no memo" directive to opt out of the React Compiler for specific components or files.

function MyComponent() {
'use no memo';

return <Text>Will not be optimized</Text>;
}

用法

¥Usage

为了更好地了解 React Compiler 的工作原理，请查看 React Playground。

¥To better understand how React Compiler works, check out the React Playground.

改进主要是自动的。你可以删除 useCallback、useMemo 和 React.memo 的实例以支持自动记忆。类组件不会进行优化。而是迁移到功能组件。

¥Improvements are primarily automatic. You can remove instances of useCallback, useMemo, and React.memo in favor of the automatic memoization. Class components will not be optimized. Instead, migrate to function components.

Expo 的 React Compiler 实现将仅在应用代码（无节点模块）上运行，并且仅在为客户端打包时运行（在服务器渲染中禁用）。

¥Expo's implementation of the React Compiler will only run on application code (no node modules), and only when bundling for the client (disabled in server rendering).

配置

¥Configuration

你可以通过使用 Babel 配置中的 react-compiler 对象将其他设置传递给 React Compiler Babel 插件：

¥You can pass additional settings to the React Compiler Babel plugin by using the react-compiler object in the Babel configuration:

babel.config.js

module.exports = function (api) {
  api.cache(true);

  return {
    presets: [
      [
        'babel-preset-expo',
        {
          'react-compiler': {
            // Passed directly to the React Compiler Babel plugin.
            compilationMode: 'strict',
            panicThreshold: 'all_errors',
          },
          web: {
            'react-compiler': {
              // Web-only settings...
            },
          },
        },
      ],
    ],
  };
};