跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.72

快速刷新

快速刷新是 React Native 一个特性,在修改组件的时候快速刷新会给你一个即时的反馈。快速刷新默认是开启的,可以通过调整 React Native 开发者菜单里面的 "Enable Fast Refresh" 来开启或关闭。在快速刷新开启的时候,大多数的修改能在一到两秒之内呈现。

原理

  • 如果你编辑了一个仅导出 React 组件的模块文件,快速刷新只会更新该模块的代码,并且重新渲染你的组件。你能够编辑文件里面的任何东西,包括样式,渲染逻辑,事件处理或者 effects。
  • 如果你编辑的模块并不导出 React 组件,快速刷新将会重新运行该模块,和其他引入该模块的模块文件。例如,Button.jsModal.js 同时引入了 Theme.js ,编辑 theme.js 的时候,Button.jsModal.js 都会更新。
  • 最后,如果你编辑了某个文件,而这个文件被 React 渲染树 之外的模块引入,则快速刷新将会回退到完全刷新。你可能有一个文件,该文件渲染了一个 React 组件,同时又导出了一个被其他非 React 组件引入的值。例如,你的 React 组件模块同时导出了一个常量,并且在非 React 组件模块引入了它。在这种情况下面,考虑将查询迁移到一个单独的文件并将其导入到两个文件中。这样快速刷新才能重新生效。其他的情况也类似。

错误还原

如果在快速刷新的过程中出现了语法错误,可以在修复错误后重新保存文件。红屏警告会跟着消失。错误语法的模块会被阻止运行,这样你就不需要重载 app。

如果出现了在模块初始化过程中的运行时错误(例如,将StyleSheet.create错打成了Style.create),在你修复错误之后,快速刷新会话会继续进行。红屏警告消失,模块更新。

如果出现了组件内部发生的运行时错误,在你修复错误之后,快速刷新会话将继续进行。在这种情况下,React 将会使用更新后的代码重新挂载你的应用。

如果你在代码中使用了error boundaries(这对于在生产环境中优雅地处理失败是一个好主意),它们将在红框之后的下一次编辑时重新尝试渲染。从这个意义上说,拥有错误边界可以防止您总是被踢出到根应用程序屏幕。然而,请记住错误边界不应该过于细粒度。它们由React在生产环境中使用,并且始终应该经过有意设计。

限制

当你正在编辑的时候,快速刷新会尝试保持组件里面的本地 state,但仅限于这种保持是安全的情况。以下是一些在你编辑文件之后,组件本地的 state 被重置的原因:

  • class 组件的本地 state 不会被保持(仅保持函数组件和 Hooks 的 state)。
  • 除了 React 组件外,您正在编辑的模块可能还有 其他 导出。
  • 有时候,一个模块导出的是一个高阶组件,例如 createNavigationContainer(MyScreen)。如果返回的组件是一个 class 组件,state 将会被重置。

从长远来看,随着越来越多的代码库转移到函数组件和 Hooks,会出现更多 state 被保持的情况。

提示

  • 快速刷新默认保持函数组件(和 Hooks)的本地 state。
  • 有时候你可能想要 强制 状态被重置,某个组件被重新挂载。例如你正在调试一个发生在挂载期间的动画,这种情况是很有用的。为了做到这一点,你可以在文件的任何地方增加 // @refresh reset。这个指令是文件的本地指令,指示快速刷新在每次编辑时重新加载该文件中定义的组件。

Fast Refresh 与 Hooks

Fast Refresh 会尽可能的在编辑刷新时保留组件的状态。特别是useStateuseRef会保持它们的先前值,只要您不更改它们的参数或Hook调用的顺序。

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

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

有时候,这可能导致意外结果。例如,即使使用空数组作为依赖项,在快速刷新期间仍然会重新运行一次 useEffect. 然而,编写能够适应偶尔重新运行 useEffect 的代码是一个好习惯,即使没有快速刷新也是如此。这样可以更轻松地引入新的依赖项到其中。