09｜Fast Refresh：提高UI调试效率神器
蒋宏伟
你好，我是蒋宏伟。今天我们来讲一讲提高 UI 调试效率的方法。
在开发 UI 时，大家一般都是一边看设计稿，一边写代码，一边调试，三种行为交替进行的。谁的大脑都不是一台编译机，也不能安装真正的 React Native 环境。即使已经思考得很完备了，我们也不能保写完的一段代码里面没有任何 Bug，每次写完的代码都能完美符合我们预期的设计。所以，我们离不开 UI 调试。
那 UI 调试效率重要吗？非常重要。你可以回想一下，是不是我们大部分的业务开发都会涉及到 UI 的开发。而在 UI 开发的过程中，你是不是会花费很多时间在调试代码上，甚至调试时间可能比真正写代码的时间还要多？正是如此，我们才更应该花点时间学一下调试技巧，把 UI 开发整体效率给提上去。
今天这节课，我会先从 React Native 快速刷新的使用讲起，然后再深入核心原理，帮你理解如何更好地使用快速刷新，提高你的 UI 开发效率。
使用快速刷新
快速刷新提效的本质是及时反馈。也就是说，你写下代码后就能看到 UI，没有其他任何多余步骤。代码完成了，UI 就更新了，这就是及时反馈。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
React Native的快速刷新（Fast Refresh）功能大大提高了UI调试效率。通过实时更新UI，开发者能够快速验证代码变化的效果。文章深入探讨了快速刷新的基础原理：模块热替换。作者详细介绍了Metro服务监听代码文件变化、编译更新文件、生成用于更新的bundle等过程。同时，作者也指出了基础的模块热替换功能存在的问题，即组件状态的丢失会导致开发效率降低。快速刷新通过“代理”组件的方式，实现了组件状态不丢失，原生视图不重建。快速刷新的整体策略是逐步降级，从更新颗粒度最小代码块开始，然后是组件、模块，最后是大颗粒度的React Native应用。这种策略保留了原来的状态和环境，提高了开发调试效率。文章还介绍了快速刷新的完整策略，以及对函数组件和类组件的调试建议。整体而言，本文通过介绍React Native中快速刷新的使用方法和基础原理，帮助读者了解了如何利用快速刷新提高UI调试效率，同时也深入探讨了模块热替换的原理及存在的问题。文章还提供了使用快速刷新功能的三个小技巧，包括同屏预览、拥抱函数组件和单独拎出来调试，以帮助读者更好地利用这一功能。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Native 新架构实战课》，新⼈⾸单¥59
《React Native 新架构实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(10)
- 最新
- 精选
worm老师您好，文中介绍使用 allFamiliesByID[id] 作为代理组件，allFamiliesByID[id] 实际上只是一个对象：{current: componentType}。那意思是 RN 里用这个对象从一些逻辑上代替了之前的组件？比如做视图更新时对比新旧组件是否浅相等，改为了只要对比这个 allFamiliesByID[id] 对象就行？ 另外，“通过‘代理’组件的方式，就可以实现在同一个组件模块的上下文中，执行不同的函数组件。”，不太理解 不同函数组件的上下文是如何保留在‘代理’组件中的？是使用变量在‘代理’组件中保存了？ 最后，“原生视图不会重新创建，从而实现了原生视图的复用”，但是视图是要更新为代码修改后的样子的，所以这里说的是不会将组件整体重新创建，但是会做内部更新的意思？作者回复: 1. 那意思是 RN 里用这个对象从一些逻辑上代替了之前的组件？是的。 2. 是使用变量在‘代理’组件中保存了？是的。变量是编译时注入的。 3. 所以这里说的是不会将组件整体重新创建，但是会做内部更新的意思？是的。不是 create，而是 update。
2022-04-27
袁德圣请教一下老师用的什么模拟器？作者回复: 我用的是mac电脑，然后它的 Xcode软件提供了默认的Simulate 模拟器。开发完 iOS 后，安卓的话，我一般会用真机再看一眼，一般不用改什么代码。
2022-04-16
Gavin 峰
即使反馈 -> 即时反馈2023-05-29归属地：广东1
静心老师讲的一如既往的好2022-06-031
潇元奕老师，我是初学者，那个置顶模拟器怎么个置顶法呢？还有那个类似网页的 dom 元素调试界面对于 react native 怎么调出来呢？2024-02-08归属地：云南
BennyTian模块：如果你修改的模块导出的东西不只是 React 组件，快速刷新将重新执行该模块以及所有依赖它的模块； React Native 应用：如果你修改的文件被 React 组件树之外的模块引用了，快速刷新将重新渲染整个 React Native 应用。 ----- 这两个可以帮忙举个例子吗？ 确实有时候遇到 更改代码后 莫名其妙刷新了整个App，很费解，感觉答案在这里，但不太理解，希望您帮忙提供例子~ 感谢~2023-11-02归属地：北京
CLC状态复用还是花了一点时间消化，后来突然想明白： “状态“是存在不变“代理”上的，代码变化保存后，“代理”会将“状态”数据给到新的函数组件进行渲染 是这样吗2023-08-19归属地：浙江- Geek_2158bf牛啊，还以为直接讲下用法就行了，想不到还把原理也讲到2023-02-14归属地：广东
昼短夜长很好, 这一章可以反复琢磨2022-08-16归属地：广东
胡少伟有没有什么办法能够js打断点2022-06-281
收起评论