快速刷新

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

原理

• 如果你编辑了一个仅导出 React 组件的模块文件，快速刷新只会更新该模块的代码，并且重新渲染你的组件。你能够编辑文件里面的任何东西，包括样式，渲染逻辑，事件处理或者 effects。
• 如果你编辑的模块并不导出 React 组件，快速刷新将会重新运行该模块，和其他引入该模块的模块文件。例如，Button.js 和 Modal.js 同时引入了 Theme.js ，编辑 theme.js 的时候，Button.js 和 Modal.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 会尽可能的在编辑刷新时保留组件的状态。特别是useState和useRef会保持它们的先前值，只要您不更改它们的参数或Hook调用的顺序。

具有依赖关系的Hooks（例如useEffect、 useMemo和 useCallback）将始终在快速刷新期间更新。在进行快速刷新时，它们的依赖列表将被忽略。

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

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