use memo

• 参考
  • "use memo"
  • "use memo" 如何标记函数以进行优化
  • 何时使用 "use memo"
• 用法
  • 使用不同的编译模式
• 故障排除
  • 验证优化
  • 另请参阅

参考

🌐 Reference

"use memo"

在函数开头添加 "use memo" 以将其标记为 React 编译器优化目标。

🌐 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" 完全匹配。
• 函数中只有第一个指令会被处理；额外的指令会被忽略。
• 该指令的效果取决于你的 compilationMode 设置。

"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" 明确标记一个函数以进行优化，覆盖默认行为：

• 在 annotation 模式下：只有具有 "use memo" 的函数会被优化
• 在 infer 模式下：编译器使用启发式方法，但 "use memo" 强制优化
• 在 all 模式下：默认情况下一切都已优化，使得 "use memo" 变得多余

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

🌐 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. 检查构建中的编译输出
2. 使用 React DevTools 检查是否有 Memo ✨ 徽章

另请参阅

🌐 See also

• "use no memo" - 选择退出编译
• compilationMode - 配置编译行为
• React 编译器 - 入门指南