“快速刷新”是一个 Next.js 特性,它为你提供对 React 组件所做的编辑的即时反馈。默认情况下在 9.4 或更高版本的所有 Next.js 应用程序中都启用了快速刷新。启用 Next.js 快速刷新后,大多数编辑应该在一秒钟内可见,而且不会丢失组件状态。
Button.js
和 Modal.js
导入 theme.js
,编辑 theme.js
就会更新这两个组件。如果在开发过程中出现语法错误,可以修复它并再次保存文件。错误将自动消失,因此你不需要重启项目。你不会丢失组件状态。
如果你犯了一个错误,导致组件内部出现运行时错误,你将会收到一个上下文复盖。修复错误将自动取消复盖,而不重新加载应用程序。
如果在呈现期间没有发生错误,组件状态将被保留。如果在渲染过程中发生错误,React 将使用更新的代码重新安装应用程序。
如果你的应用有错误的边界(这是一个很好的主意,在生产中优雅的失败),他们将在下一次编辑时重试渲染。这意味着有一个错误边界可以防止你总是得到重置到初始的应用程序状态。但是,请记住,错误边界不应该太细。在生产过程中,它们被 React 使用,并且应该被故意设计。
“快速刷新”尝试在正在编辑的组件中保留本地 React 状态,但前提是这样做是安全的。这里有几个原因可以解释为什么在每次编辑时都会重置本地状态:
higherOrderComponent(WrappedComponent)
。如果返回的组件是一个类,则将重置状态。随着更多的代码库移动到函数组件和 Hooks,你可以期望在更多的情况下保留状态。
// @refresh reset
。这个指令是该文件的本地指令,并指示“快速刷新”在每次编辑时重新装入该文件中定义的组件。console.log
或 debugger;
放入你编辑的组件中。在可能的情况下,快速刷新尝试在编辑之间保留组件的状态。特别是,只要不更改 useState
和 useRef
的参数或调用的顺序。
带有依赖项的钩子 — 比如 useEffect
、 useMemo
和 useCallback
- 在快速刷新期间总是更新。当快速刷新发生时,它们的依赖项列表将被忽略。
例如,当你编辑useMemo(() => x * 2, [x])
成 useMemo(() => x * 10, [x])
,即使 x
(依赖项)没有改变,它也会重新运行。如果 React 没有这样做,你的编辑就不会显示出来!
有时,这会导致意想不到的结果。例如,即使是带有依赖项的空数组的 useEffect
在快速刷新期间仍然会重新运行一次。
然而,即使没有快速刷新,编写能够偶尔重新运行 useEffect
的代码也是一个很好的实践。这将使你更容易在以后引入新的依赖项。它是由 React 严格模式执行的,我们强烈建议启用它。