Next.js教程基本特性：快速刷新（Fast Refresh）

先看实例：Fast Refresh Demo

快速刷新（Fast Refresh）是 Next.js 的一项功能，当你编辑 React 组件时，可以为你提供即时的反馈。 默认情况下，快速刷新（Fast Refresh）功能在所有 Next.js 9.4 或更新版本 的应用程序中是开启的。启用 Next.js 的快速刷新（Fast Refresh）后， 大多数编辑器应该在一秒钟内就可以感知到了，并且不会丢失组件的 状态。

工作原理

如果您编辑仅导出React组件的文件，则Fast Refresh将仅更新该文件的代码，然后重新渲染您的组件。您可以编辑该文件中的任何内容，包括样式，渲染逻辑，事件处理程序或效果。
如果您使用不是React组件的导出来编辑文件，则Fast Refresh将重新运行该文件以及导入该文件的其他文件。因此，如果Button.js和Modal.js都导入theme.js，则编辑theme.js将同时更新这两个组件。
最后，如果您编辑由React树之外的文件导入的文件，则Fast Refresh将退回到完全重新加载的状态。您可能有一个呈现React组件但还导出非React组件导入的值的文件。例如，也许您的组件还导出了一个常量，而非React实用程序文件则导入了它。在这种情况下，请考虑将常量迁移到单独的文件中，然后将其导入两个文件中。这将重新启用“快速刷新”才能正常工作。其他情况通常可以用类似的方式解决。

容错能力

语法错误

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

运行时错误

如果你犯的错误导致组件内部出现运行时错误，那么您将获得一个上下文覆盖。 修正错误后，系统会自动关闭该叠加层，而无需重新加载该应用程序。

如果在渲染过程中未发生错误，则组件状态将被保留。如果 在渲染过程中发生了错误，则 React 将使用更新后的代码重新 mount 你的 应用程序。

如果您 的应用程序中存在Error Boundaries（这是生产中正常失败的一个好主意），则它们将在出现渲染错误后在下一次编辑时重试渲染。这意味着具有错误边界可以防止您始终重置为根应用程序状态。但是，请记住，错误边界不应太细粒度。它们在React中用于生产中，并且应始终经过有意设计。

局限性

快速刷新会尝试在您正在编辑的组件中保留本地React状态，但前提是必须这样做是安全的。您可能会在每次编辑文件时看到重置本地状态的一些原因：

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

随着更多代码库移至功能组件和Hook，可以期望在更多情况下保留状态。

TIPS

• 默认情况下，Fast Refresh保留功能组件（和Hooks）中的React局部状态。
• 有时，您可能需要强制重置状态并重新安装组件。例如，如果要调整仅在安装时发生的动画，这可能很方便。为此，您可以// @refresh reset 在正在编辑的文件中的任何位置添加。该指令是文件本地的，并指示“快速刷新”在每次编辑时重新安装该文件中定义的组件。
• 您可以在开发过程中放入console.log或debugger;放入要编辑的组件中。

Fast Refresh and Hooks

如果可能，快速刷新将尝试在两次编辑之间保留组件的状态。特别是，useState和useRef只要你不改变自己的论点或挂钩调用的顺序保存其先前的值。

钩具有相关性，如useEffect，useMemo和useCallback-将会 一直快速刷新的过程中更新。快速刷新发生时，将忽略其依赖项列表。

例如，当您对useMemo(() => x * 2, [x])进行编辑时 useMemo(() => x * 10, [x])，即使x（依赖项）没有更改，它也将重新运行。如果React没有做到这一点，那么您的编辑将不会在屏幕上反映出来！

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

但是，useEffect即使没有快速刷新，编写偶尔可以重新运行的有弹性的代码也是一个好习惯。它将使您以后更容易引入新的依赖关系，并且由React Strict Mode强制实施，我们强烈建议启用它。