v19.2Latest

调试与故障排除

本指南帮助您识别和修复使用 React 编译器时遇到的问题。学习如何调试编译问题并解决常见问题。

理解编译器行为

React 编译器旨在处理遵循 React 规则的代码。当它遇到可能违反这些规则的代码时，它会安全地跳过优化，而不是冒险改变应用程序的行为。

编译器错误发生在构建时，会阻止代码编译。这种情况很少见，因为编译器的设计是跳过有问题的代码而不是导致失败。

运行时问题发生在编译后的代码行为与预期不同时。大多数情况下，如果您遇到 React 编译器的问题，那就是运行时问题。这通常发生在您的代码以编译器无法检测的微妙方式违反 React 规则，并且编译器错误地编译了本应跳过的组件时。

调试运行时问题时，请集中精力查找受影响的组件中未被 ESLint 规则检测到的 React 规则违反情况。编译器依赖于您的代码遵循这些规则，当它们以编译器无法检测的方式被破坏时，就会发生运行时问题。

React 编译器可能破坏您的应用程序的主要方式之一是，如果您的代码编写时依赖记忆化来保证正确性。这意味着您的应用程序依赖于特定的值被记忆化才能正常工作。由于编译器的记忆化方式可能与您的手动方法不同，这可能导致意外行为，如副作用过度触发、无限循环或更新缺失。

发生这种情况的常见场景：

遇到问题时，请按照以下步骤操作：

如果您遇到意外中断构建的编译器错误，这很可能是编译器中的一个错误。请将其报告到facebook/react仓库，并提供：

对于运行时行为问题：

使用"use no memo" 来隔离问题是否与编译器相关：

如果问题消失，则很可能与违反 React 规则有关。

您也可以尝试从有问题的组件中移除手动记忆化（useMemo、useCallback、memo），以验证您的应用程序在没有任何记忆化的情况下是否能正常工作。如果移除所有记忆化后错误仍然发生，则说明您有一个需要修复的 React 规则违反情况。

如果您认为发现了编译器错误：