跳到内容
简介架构快速刷新

快速刷新

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

工作原理

  • 如果您编辑一个仅导出 React 组件的文件,快速刷新将仅更新该文件的代码,并重新渲染您的组件。您可以编辑该文件中的任何内容,包括样式、渲染逻辑、事件处理程序或效果。
  • 如果您编辑一个是 React 组件的文件,快速刷新将重新运行该文件和导入它的其他文件。因此,如果 Button.jsModal.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.logdebugger; 放入您在开发期间编辑的组件中。
  • 请记住,导入是区分大小写的。当您的导入与实际文件名不匹配时,快速刷新和完全刷新都可能失败。例如,'./header''./Header'

快速刷新和 Hooks

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

具有依赖项的 Hooks(例如 useEffectuseMemouseCallback)在快速刷新期间始终会更新。在快速刷新发生时,它们的依赖项列表将被忽略。

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

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

但是,即使没有快速刷新,编写能够弹性应对 useEffect 偶尔重新运行的代码也是一个好习惯。这将使您以后更容易向其引入新的依赖项,并且 React 严格模式 强制执行了这一点,我们强烈建议启用它。