快速刷新

快速刷新是 React Native 的一项功能，允许你对 React 组件的更改获得近乎即时的反馈。快速刷新默认启用，你可以在React Native 开发菜单中切换“启用快速刷新”。启用快速刷新后，大多数编辑应在一两秒内可见。

工作原理

如果你编辑的模块**只导出 React 组件**，快速刷新将仅更新该模块的代码，并重新渲染你的组件。你可以编辑该文件中的任何内容，包括样式、渲染逻辑、事件处理程序或效果。
如果你编辑的模块的导出**不是** React 组件，快速刷新将重新运行该模块以及导入它的其他模块。因此，如果 `Button.js` 和 `Modal.js` 都导入 `Theme.js`，编辑 `Theme.js` 将更新这两个组件。
最后，如果你**编辑**一个被**React 树之外的模块导入**的文件，快速刷新**将回退到完全重新加载**。你可能有一个文件渲染 React 组件，但也导出一个被**非 React 组件**导入的值。例如，你的组件可能还导出一个常量，而一个非 React 实用程序模块导入了它。在这种情况下，考虑将该常量迁移到一个单独的文件中，并将其导入到这两个文件中。这将使快速刷新重新工作。其他情况通常也可以用类似的方式解决。

如果你在快速刷新会话期间出现**语法错误**，可以修复它并再次保存文件。红框将消失。有语法错误的模块将无法运行，因此你无需重新加载应用程序。

如果你在**模块初始化期间**发生**运行时错误**（例如，键入 `Style.create` 而不是 `StyleSheet.create`），一旦你修复错误，快速刷新会话将继续。红框将消失，模块将被更新。

如果你犯了一个导致**组件内部运行时错误**的错误，快速刷新会话在你修复错误后**也将**继续。在这种情况下，React 将使用更新后的代码重新挂载你的应用程序。

如果你的应用程序中使用了错误边界（这是生产环境中优雅失败的好主意），它们将在红框出现后的下一次编辑时重试渲染。从这个意义上说，拥有一个错误边界可以防止你总是被踢回到应用程序的根屏幕。但是，请记住错误边界不应该**过于**细粒度。它们在生产中被 React 使用，并且应该始终有意识地设计。

快速刷新会尝试保留你正在编辑的组件中的本地 React 状态，但仅限于安全的情况下。以下是每次编辑文件时，本地状态可能会被重置的几个原因：

类组件的本地状态不会被保留（只有函数组件和 Hooks 会保留状态）。
你正在编辑的模块除了 React 组件之外，可能还有**其他**导出。
有时，一个模块会导出调用高阶组件（例如 `createNavigationContainer(MyScreen)`）的结果。如果返回的组件是类组件，状态将被重置。

从长远来看，随着你的代码库更多地转向函数组件和 Hooks，你可以期望在更多情况下保留状态。

快速刷新默认保留函数组件（和 Hooks）中的 React 本地状态。
有时你可能希望**强制**重置状态，并重新挂载组件。例如，如果你正在调整一个只在挂载时发生的动画，这会很方便。要做到这一点，你可以在正在编辑的文件的任何位置添加 `// @refresh reset`。这个指令是文件本地的，并指示快速刷新在每次编辑时重新挂载该文件中定义的组件。

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

带有依赖项的 Hooks（例如 `useEffect`、`useMemo` 和 `useCallback`）在快速刷新期间**总是**会更新。在快速刷新发生时，它们的依赖项列表将被忽略。

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

有时，这可能会导致意想不到的结果。例如，即使是带有空依赖数组的 `useEffect` 仍然会在快速刷新期间重新运行一次。然而，编写能够弹性应对 `useEffect` 偶尔重新运行的代码是很好的实践，即使没有快速刷新也是如此。这使得你以后更容易向其引入新的依赖项。