API 参考
指令

use no memo

"use no memo" 阻止 React 编译器优化一个函数。

参考

🌐 Reference

"use no memo"

在函数开头添加 "use no memo" 以防止 React 编译器优化。

🌐 Add "use no memo" at the beginning of a function to prevent React Compiler optimization.

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

当一个函数包含 "use no memo" 时，React 编译器在优化期间会完全跳过它。这在调试或处理与编译器不兼容的代码时非常有用，作为一种临时的解决方法。

🌐 When a function contains "use no memo", the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn’t work correctly with the compiler.

注意事项

🌐 Caveats

  • "use no memo" 必须位于函数体的最开始，在任何导入或其他代码之前（注释除外）。
  • 该指令必须使用双引号或单引号，而不是反引号。
  • 该指令必须与 "use no memo" 或其别名 "use no forget" 完全匹配。
  • 此指令优先于所有编译模式和其他指令。
  • 它旨在用作临时调试工具，而非永久解决方案。

"use no memo" 如何选择退出优化

🌐 How "use no memo" opts-out of optimization

React 编译器在构建时分析你的代码以应用优化。"use no memo" 创建了一个显式边界，告诉编译器完全跳过一个函数。

🌐 React Compiler analyzes your code at build time to apply optimizations. "use no memo" creates an explicit boundary that tells the compiler to skip a function entirely.

此指令优先于所有其他设置：

🌐 This directive takes precedence over all other settings:

  • 在 all 模式下：尽管有全局设置，该功能仍会被跳过
  • infer 模式下：即使启发式方法可以优化该函数，也会跳过该函数

编译器会将这些函数视为未启用 React 编译器，使其保持原样。

🌐 The compiler treats these functions as if the React Compiler wasn’t enabled, leaving them exactly as written.

何时使用 "use no memo"

🌐 When to use "use no memo"

"use no memo" 应该谨慎且暂时使用。常见的场景包括：

调试编译器问题

🌐 Debugging compiler issues

当你怀疑编译器导致问题时，请暂时禁用优化以隔离问题：

🌐 When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem:

function ProblematicComponent({ data }) {
  "use no memo"; // TODO: Remove after fixing issue #123

  // Rules of React violations that weren't statically detected
  // ...
}

第三方库集成

🌐 Third-party library integration

当与可能与编译器不兼容的库集成时：

🌐 When integrating with libraries that might not be compatible with the compiler:

function ThirdPartyWrapper() {
  "use no memo";

  useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
  // ...
}

用法

🌐 Usage

"use no memo" 指令放置在函数体的开头，以防止 React 编译器对该函数进行优化：

🌐 The "use no memo" directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function:

function MyComponent() {
  "use no memo";
  // Function body
}

该指令也可以放在文件顶部，以影响该模块中的所有函数：

🌐 The directive can also be placed at the top of a file to affect all functions in that module:

"use no memo";

// All functions in this file will be skipped by the compiler

"use no memo" 在函数级别会覆盖模块级别的指令。

故障排除

🌐 Troubleshooting

指令未阻止编译

🌐 Directive not preventing compilation

如果 "use no memo" 不工作：

🌐 If "use no memo" isn’t working:

// ❌ Wrong - directive after code
function Component() {
  const data = getData();
  "use no memo"; // Too late!
}

// ✅ Correct - directive first
function Component() {
  "use no memo";
  const data = getData();
}

另请检查：

🌐 Also check:

  • 拼写 - 必须完全是 "use no memo"
  • 引号 - 必须使用单引号或双引号，不可使用反引号

最佳实践

🌐 Best practices

始终记录你禁用优化的原因：

// ✅ Good - clear explanation and tracking
function DataProcessor() {
  "use no memo"; // TODO: Remove after fixing rule of react violation
  // ...
}

// ❌ Bad - no explanation
function Mystery() {
  "use no memo";
  // ...
}

另请参阅

🌐 See also

上一章"use memo"
下一章编译库