This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

了解如何在 Expo 应用中启用和使用 React 编译器。

新的 React 编译器 会自动对组件和 hooks 进行 memoize，从而实现细粒度响应。这可以显著提升你应用的性能。你可以按照下面的说明在你的应用中启用它。

启用 React 编译器

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

启用 linter

运行 npx expo lint 来在你的应用中配置 ESLint，然后按照你的 SDK 版本说明继续操作：

// https://docs.expo.dev/guides/using-eslint/
const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
const reactCompiler = require('eslint-plugin-react-compiler');

module.exports = defineConfig([
  expoConfig,
  reactCompiler.configs.recommended,
  {
    ignores: ['dist/*'],
  },
]);

渐进式采用

你可以使用以下几种策略在你的应用中逐步采用 React Compiler：

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

  return {
    presets: [
      [
        'babel-preset-expo',
        {
          'react-compiler': {
            sources: filename => {
              // 匹配要包含到 React 编译器中的文件名。
              return filename.includes('src/path/to/dir');
            },
          },
        },
      ],
    ],
  };
};

function MyComponent() {
  'use no memo';

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

使用

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

改进主要是自动完成的。你可以移除 useCallback、useMemo 和 React.memo 的使用，改为依赖自动 memoization。类组件不会被优化，应改为迁移到函数组件。

Expo 对 React Compiler 的实现只会在应用代码上运行（不包括 node_modules），并且只在为客户端打包时运行（服务端渲染中禁用）。

配置

你可以通过在 Babel 配置中使用 react-compiler 对象，向 React Compiler Babel 插件传递额外设置：

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

  return {
    presets: [
      [
        'babel-preset-expo',
        {
          'react-compiler': {
            // 直接传递给 React Compiler Babel 插件。
            compilationMode: 'all',
            panicThreshold: 'all_errors',
          },
          web: {
            'react-compiler': {
              // 仅限 Web 的设置...
            },
          },
        },
      ],
    ],
  };
};