API 参考
指令

使用 memo

"use memo" 标记要使用 React Compiler 优化的函数。

¥"use memo" marks a function for React Compiler optimization.

注意

在大多数情况下，你不需要 "use memo"。它主要在 annotation 模式下需要，此时你必须明确标记需要优化的函数。在 infer 模式下，编译器会根据组件和钩子的命名模式自动检测组件和钩子（组件使用 PascalCase 命名，钩子使用 use 前缀）。如果某个组件或钩子未在 infer 模式下编译，你应该修复其命名约定，而不是强制使用 "use memo" 进行编译。

¥In most cases, you don’t need "use memo". It’s primarily needed in annotation mode where you must explicitly mark functions for optimization. In infer mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, use prefix for hooks). If a component or hook isn’t being compiled in infer mode, you should fix its naming convention rather than forcing compilation with "use memo".

参考

¥Reference

"use memo"

在函数开头添加 "use memo"，以标记该函数需要 React Compiler 优化。

¥Add "use memo" at the beginning of a function to mark it for React Compiler optimization.

function MyComponent() {
  "use memo";
  // ...
}

当函数包含 "use memo" 时，React 编译器将在构建时对其进行分析和优化。编译器将自动记忆值和组件，以避免不必要的重新计算和重新渲染。

¥When a function contains "use memo", the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders.

注意事项

¥Caveats

  • "use memo" 必须位于函数体的最开头，在任何导入或其他代码之前（注释可以）。

    ¥"use memo" must be at the very beginning of a function body, before any imports or other code (comments are OK).

  • 该指令必须使用双引号或单引号，而不是反引号。

    ¥The directive must be written with double or single quotes, not backticks.

  • 该指令必须与 "use memo" 完全匹配。

    ¥The directive must exactly match "use memo".

  • 仅处理函数中的第一个指令；其他指令将被忽略。

    ¥Only the first directive in a function is processed; additional directives are ignored.

  • 该指令的效果取决于你的 compilationMode 设置。

    ¥The effect of the directive depends on your compilationMode setting.

"use memo" 如何标记需要优化的函数

¥How "use memo" marks functions for optimization

在使用 React 编译器的 React 应用中，函数会在构建时进行分析，以确定它们是否可以进行优化。默认情况下，编译器会自动推断需要记忆的组件，但这取决于你的 compilationMode 设置（如果你已设置）。

¥In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your compilationMode setting if you’ve set it.

"use memo" 明确标记要优化的函数，覆盖默认行为：

¥"use memo" explicitly marks a function for optimization, overriding the default behavior:

  • 在 annotation 模式下：仅优化带有 "use memo" 指令的函数

    ¥In annotation mode: Only functions with "use memo" are optimized

  • 在 infer 模式下：编译器使用启发式算法，但 "use memo" 强制优化

    ¥In infer mode: The compiler uses heuristics, but "use memo" forces optimization

  • 在 all 模式下：所有内容默认已优化，因此 "use memo" 是多余的

    ¥In all mode: Everything is optimized by default, making "use memo" redundant

该指令在代码库中创建了优化代码和非优化代码之间的清晰界限，使你可以对编译过程进行细粒度的控制。

¥The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process.

何时使用 "use memo"

¥When to use "use memo"

在以下情况下，你应该考虑使用 "use memo"：

¥You should consider using "use memo" when:

你正在使用注解模式

¥You’re using annotation mode

在 compilationMode: 'annotation' 模式下，任何你想要优化的函数都需要该指令：

¥In compilationMode: 'annotation', the directive is required for any function you want optimized:

// ✅ This component will be optimized
function OptimizedList() {
  "use memo";
  // ...
}

// ❌ This component won't be optimized
function SimpleWrapper() {
  // ...
}

你正在逐步采用 React Compiler

¥You’re gradually adopting React Compiler

从 annotation 模式开始，并选择性地优化稳定的组件：

¥Start with annotation mode and selectively optimize stable components:

// Start by optimizing leaf components
function Button({ onClick, children }) {
  "use memo";
  // ...
}

// Gradually move up the tree as you verify behavior
function ButtonGroup({ buttons }) {
  "use memo";
  // ...
}

用法

¥Usage

使用不同的编译模式

¥Working with different compilation modes

"use memo" 的行为会根据你的编译器配置而变化：

¥The behavior of "use memo" changes based on your compiler configuration:

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation' // or 'infer' or 'all'
    }]
  ]
};

注解模式

¥Annotation mode

// ✅ Optimized with "use memo"
function ProductCard({ product }) {
  "use memo";
  // ...
}

// ❌ Not optimized (no directive)
function ProductList({ products }) {
  // ...
}

推断模式（默认）

¥Infer mode (default)

// Automatically memoized because this is named like a Component
function ComplexDashboard({ data }) {
  // ...
}

// Skipped: Is not named like a Component
function simpleDisplay({ text }) {
  // ...
}

在 infer 模式下，编译器会根据组件和钩子的命名模式自动检测组件和钩子（组件使用 PascalCase 命名，钩子使用 use 前缀）。如果某个组件或钩子未在 infer 模式下编译，你应该修复其命名约定，而不是强制使用 "use memo" 进行编译。

¥In infer mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, use prefix for hooks). If a component or hook isn’t being compiled in infer mode, you should fix its naming convention rather than forcing compilation with "use memo".

故障排除

¥Troubleshooting

验证优化

¥Verifying optimization

要确认你的组件正在优化：

¥To confirm your component is being optimized:

  1. 检查构建中的编译输出

    ¥Check the compiled output in your build

  2. 使用 React DevTools 检查是否有 Memo ✨ 徽章

    ¥Use React DevTools to check for Memo ✨ badge

另请参阅

¥See also

上一章指令
下一章"use no memo"