快速刷新是集成到 Next.js 中的一项 React 功能，它允许你在保存文件更改时实时重新加载浏览器页面，同时保持临时的客户端状态。它在 9.4 或更高版本的所有 Next.js 应用程序中默认启用。启用快速刷新后，大多数编辑应在一秒内可见。

工作原理

• 如果你编辑的文件只导出 React 组件，快速刷新将仅更新该文件的代码，并重新渲染你的组件。你可以编辑该文件中的任何内容，包括样式、渲染逻辑、事件处理程序或 effect。
• 如果你编辑的文件导出的内容_不是_ React 组件，快速刷新将重新运行该文件以及所有导入它的文件。因此，如果 Button.js 和 Modal.js 都导入了 theme.js，编辑 theme.js 将更新这两个组件。
• 最后，如果你编辑的文件被React 树之外的文件导入，快速刷新将回退到执行完全重新加载。你可能有一个文件，它渲染一个 React 组件，但同时也导出一个被非 React 组件导入的值。例如，你的组件可能也导出一个常量，并且一个非 React 实用程序文件导入了它。在这种情况下，请考虑将该常量迁移到一个单独的文件中，并将其导入到这两个文件中。这将重新启用快速刷新功能。其他情况通常也可以通过类似方式解决。

错误弹性

语法错误

如果在开发过程中出现语法错误，你可以修复它并再次保存文件。错误将自动消失，因此你无需重新加载应用程序。你不会丢失组件状态。

运行时错误

如果你的组件中出现导致运行时错误的错误，你将看到一个上下文叠加层。修复错误将自动关闭叠加层，而无需重新加载应用程序。

如果错误未在渲染期间发生，则组件状态将得以保留。如果错误确实在渲染期间发生，React 将使用更新后的代码重新挂载你的应用程序。

如果你的应用程序中有错误边界（这对于生产环境中优雅的失败是一个好主意），它们将在渲染错误后的下一次编辑时重试渲染。这意味着拥有错误边界可以防止你总是被重置到根应用程序状态。但是，请记住错误边界不应_过于_细粒度。它们由 React 在生产环境中使用，并且应始终有目的地设计。

局限性

快速刷新尝试在编辑组件时保留 React 本地状态，但仅在安全的情况下才会这样做。以下是你每次编辑文件时可能会看到本地状态被重置的几个原因：

• 类组件的本地状态不会被保留（只有函数组件和 Hooks 会保留状态）。
• 你正在编辑的文件除了 React 组件外，可能还有_其他_导出。
• 有时，文件会导出调用高阶组件（如 HOC(WrappedComponent)）的结果。如果返回的组件是一个类，其状态将被重置。
• 匿名箭头函数，如 export default () => <div />;，会导致快速刷新无法保留本地组件状态。对于大型代码库，你可以使用我们的name-default-component codemod。

随着你的代码库更多地转向函数组件和 Hooks，你可以期待在更多情况下状态得到保留。

提示

• 快速刷新默认在函数组件（和 Hooks）中保留 React 本地状态。
• 有时你可能希望_强制_重置状态，并重新挂载组件。例如，如果你正在调整一个只在挂载时发生的动画，这会很方便。为此，你可以在正在编辑的文件的任何位置添加 // @refresh reset。这个指令是文件本地的，并指示快速刷新在每次编辑时重新挂载该文件中定义的组件。
• 你可以在开发过程中将 console.log 或 debugger; 放入你编辑的组件中。
• 请记住，导入是区分大小写的。当你的导入与实际文件名不匹配时，快速刷新和完全刷新都可能失败。例如，'./header' 与 './Header'。

快速刷新与 Hooks

在可能的情况下，快速刷新尝试在编辑之间保留组件的状态。特别是，useState 和 useRef 会保留它们之前的值，只要你不改变它们的参数或 Hook 调用的顺序。

带有依赖项的 Hooks，例如 useEffect、useMemo 和 useCallback，在快速刷新期间将_始终_更新。在快速刷新发生时，它们的依赖项列表将被忽略。

例如，当你将 useMemo(() => x * 2, [x]) 编辑为 useMemo(() => x * 10, [x]) 时，即使 x（依赖项）没有改变，它也会重新运行。如果 React 不这样做，你的编辑就不会反映在屏幕上！

有时，这可能会导致意想不到的结果。例如，即使是依赖项为空数组的 useEffect 在快速刷新期间仍会重新运行一次。

然而，编写能够弹性应对 useEffect 偶尔重新运行的代码是一个好习惯，即使没有快速刷新也是如此。它将使你将来更容易引入新的依赖项，并且它受到我们强烈建议启用的React 严格模式的强制执行。