首页 练字文章 React Native快速刷新,Metro

React Native快速刷新,Metro

2024-06-10 18:01  浏览数:174  来源:许某    

快速刷新是 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'], },};



声明:以上文章均为用户自行添加,仅供打字交流使用,不代表本站观点,本站不承担任何法律责任,特此声明!如果有侵犯到您的权利,请及时联系我们删除。

字符:    改为:
去打字就可以设置个性皮肤啦!(O ^ ~ ^ O)