快速刷新

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

工作原理

如果你编辑的文件仅导出 React 组件，快速刷新将仅更新该文件的代码，并重新渲染你的组件。你可以编辑该文件中的任何内容，包括样式、渲染逻辑、事件处理程序或效果。
如果你编辑的文件导出的内容不是 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 代码重构工具。

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

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

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

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

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

有时，这可能会导致意外的结果。例如，即使是一个具有空依赖数组的 useEffect 也会在快速刷新期间重新运行一次。

然而，即使没有快速刷新，编写能够偶尔重新运行 useEffect 的代码也是一个好的做法。它将使你更容易在以后为其引入新的依赖项，并且它是由 React 严格模式强制执行的，我们强烈建议启用它。