快速刷新是 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)。如果返回的组件是一个 cl
ass 组件，state 将会被重置。从长远来看，随着越来越多的代码库转移到函数组件和 Hooks，会出现更多
state 被保持的情况。提示快速刷新默认保持函数组件（和 Hooks）的本地 state。有时候你可能想要
强制 状态被重置，某个组件被重新挂载。例如你正在调试一个发生在挂载期间的动画，这种情况是很有用的。为了做到这
一点，你可以在文件的任何地方增加 // @refresh reset。这个指令是文件的本地指令，指示快速刷新在
每次编辑时重新加载该文件中定义的组件。Fast Refresh 与 HooksFast Refresh 会尽可
能的在编辑刷新时保留组件的状态。特别是useState和useRef会保持它们的先前值，只要您不更改它们的参数
或Hook调用的顺序。具有依赖关系的Hooks（例如useEffect、 useMemo和 useCallba
ck）将始终在快速刷新期间更新。在进行快速刷新时，它们的依赖列表将被忽略。例如，当您将 useMemo(()
=> x * 2, [x]) 编辑为 useMemo(() => x * 10, [x]), 即使 x(依赖项
) 没有改变，它也会重新运行。如果React不这样做，则您所做的编辑不会反映在屏幕上！有时候，这可能导致意外结
果。例如，即使使用空数组作为依赖项，在快速刷新期间仍然会重新运行一次 useEffect. 然而，编写能够适应
偶尔重新运行 useEffect 的代码是一个好习惯，即使没有快速刷新也是如此。这样可以更轻松地引入新的依赖项
到其中。MetroReact Native 使用Metro构建 JavaScript 代码和资源。配置 Met
ro可以在项目的metro.config.js文件中自定义 Metro 的配置选项。它可以导出:一个对象(推荐
),将与 Metro 的内部配置默认值合并。一个函数,该函数将使用 Metro 的内部配置默认值被调用,并返回
最终的配置对象。TIP请查看 Metro 网站上的配置 Metro,了解所有可用的配置选项文档。在 React
Native 中,你的 Metro 配置应该扩展@react-native/metro-config或@ex
po/metro-config。这些包含构建和运行 React Native 应用所需的基本默认值。下面是 R
eact Native 模板项目中默认的metro.config.js文件:const { getDefau
ltConfig, mergeConfig,} = require('@react-native/metro
-config');/** * Metro配置 * url
/configuration * * @type {import('metro-config').MetroC
onfig} */const config = {};module.exports = mergeConfig
(getDefaultConfig(__dirname), config);你希望自定义的 Metro 选项可
以在config对象中完成。高级:使用配置函数导出一个配置函数是自行管理最终配置的选择 - Metro 不会应
用任何内部默认值。当需要从 Metro 读取基础默认配置对象或动态设置选项时,此模式会很有用。INFO从@re
act-native/metro-config 0.72.1 开始,不再需要使用配置函数来访问完整的默认配置。
请参阅下面的提示部分。const { getDefaultConfig, mergeConfig,} =
require('@react-native/metro-config');module.exports =
function (baseConfig) { const defaultConfig = mergeCon
fig( baseConfig, getDefaultConfig(__dirname), );
const { resolver: {assetExts, sourceExts}, } = de
faultConfig; return mergeConfig(defaultConfig, { re
solver: { assetExts: assetExts.filter(ext => ext !
== 'svg'), sourceExts: [...sourceExts, 'svg'],
}, });};TIP使用配置函数是为高级用例而设计的。如需自定义sourceExts等选项,一种更简单的方
法是从@react-native/metro-config中读取这些默认值。替代方案const default
Config = getDefaultConfig(__dirname);const config = {
resolver: { sourceExts: [...defaultConfig.resolver.s
ourceExts, 'svg'], },};module.exports = mergeConfig(de
faultConfig, config);但是!,我们建议在覆盖这些配置值时复制并编辑 - 将真实来源放在你的
配置文件中。✅ 推荐const config = { resolver: { sourceExts:
['js', 'ts', 'tsx', 'svg'], },};