Flutter 核心技术与实战
陈航
前美团点评高级技术专家
42432 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 48 讲
Flutter 核心技术与实战
15
15
1.0x
00:00/00:00
登录|注册

35 | Hot Reload是怎么做到的?

Widget重建
代码合并
推送更新
增量编译
工程改动
热重启
热重载的局限性
热重载的优势
枚举和泛型类型更改
initState方法里的更改
main方法里的更改
全局变量和静态属性的更改
Widget状态无法兼容
代码出现编译错误
热重载流程
AOT编译模式
JIT编译模式
思考题
总结
不支持热重载的场景
热重载
Flutter的热重载是如何实现的?

该思维导图由 AI 生成,仅供参考

你好,我是陈航。
在上一篇文章中,我与你分享了 Flutter 的 Debug 与 Release 编译模式,以及如何通过断言与编译常数来精准识别当前代码所运行的编译模式,从而写出只在 Debug 或 Release 模式下生效的代码。
另外,对于在开发期与发布期分别使用不同的配置环境,Flutter 也提供了支持。我们可以将应用中可配置的部分进行封装抽象,使用配置多入口的方式,通过 InheritedWidget 来为应用的启动注入环境配置。
如果你有过原生应用的开发经历,那你一定知道在原生应用开发时,如果我们想要在硬件设备上看到调整后的运行效果,在完成了代码修改后,必须要经过漫长的重新编译,才能同步到设备上。
而 Flutter 则不然,由于 Debug 模式支持 JIT,并且为开发期的运行和调试提供了大量优化,因此代码修改后,我们可以通过亚秒级的热重载(Hot Reload)进行增量代码的快速刷新,而无需经过全量的代码编译,从而大大缩短了从代码修改到看到修改产生的变化之间所需要的时间。
比如,在开发页面的过程中,当我们点击按钮出现一个弹窗的时候,发现弹窗标题没有对齐,这时候只要修改标题的对齐样式,然后保存,在代码并没有重新编译的情况下,标题样式就发生了改变,感觉就像是在 UI 编辑面板中直接修改元素样式一样,非常方便。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Flutter的热重载技术是一种基于JIT编译模式的动态代码同步方法,能够在不中断应用程序正常运行的情况下,实现代码的实时更新。通过扫描工程改动、增量编译、推送更新、代码合并和Widget重建等步骤,开发者可以快速修改UI、修复Bug,无需重启应用即可看到改动效果,大大提升了UI调试效率。然而,热重载也有一定的局限性,例如对枚举和泛型类型的更改不支持热重载,需要重启应用才能查看到更改效果。热重载提高了调试UI的效率,非常适合写界面样式这样需要反复查看修改效果的场景,但由于其状态保存的机制所限,热重载本身也有一些无法支持的边界。除了Flutter,读者还可以思考其他框架(比如React Native、Webpack)的热重载机制,以及它们与Flutter的区别。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Flutter 核心技术与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(12)

  • 最新
  • 精选
  • GL
    React Native 采用脚本语言编写,脚本语言即读即运行,不需要编译,在读之前替换成新版本的脚本,运行时执行的便是新的逻辑;RN打包时会将RN源代码、第三方库及自己编写的js代码都打包成一个bundle文件(Android是index.android.bundle,ios是index.ios.bundle),App启动时会加载bundle文件,所以替换掉这个bundle文件就能实现热重载了,RN中提供了修改读取bundle路径的方法,可以将最新的bundle更新到读取bundle的指定路径进而实现热重载。

    作者回复: 赞👍

    2019-09-17
    2
    8
  • 许童童
    Webpack的热重载原理大致是:初始化注入一段js脚本,里面与webpack开发服务器建立一个WebSocket连接,当文件有改动的时间,通过WebSocket将文件下发,随后浏览器重新执行新的代码。状态管理则是在内存中,依赖Redux之类的库,所以UI和状态是分离的,可以比较容易的实现热重载。

    作者回复: 赞

    2019-09-17
    4
  • 菜头
    Flutter 支持热更吗

    作者回复: 官方不支持;Android的纯Flutter应用可以通过产物替换实现,iOS不行

    2019-11-20
  • zzz
    对于现有 iOS 工程集成的 flutter_module 类型,支持 hot reload 的原理是什么呢?可以理解为代码改变后,重新生成了app.framework,之后flutter.framework中的Dart VM 和 Kernel 来实现 app.framework的重新加载,以及对应的Widget重建么?

    作者回复: 和纯Flutter App一样的呀,他俩运行机制没有区别

    2019-10-03
    2
  • 神佑小鹿
    记录: React Native 采用脚本语言编写,脚本语言即读即运行,不需要编译,在读之前替换成新版本的脚本,运行时执行的便是新的逻辑;RN 打包时会将 RN 源代码、第三方库及自己编写的 js 代码都打包成一个 bundle 文件 (Android 是 index.android.bundle,ios 是 index.ios.bundle),App 启动时会加载 bundle 文件,所以替换掉这个 bundle 文件就能实现热重载了,RN 中提供了修改读取 bundle 路径的方法,可以将最新的 bundle 更新到读取 bundle 的指定路径进而实现热重载。
    2023-04-08归属地:广东
    1
  • 张训博-forrest
    Release模式是AOT模式,android编译成so文件,那么运行时是不是不需要Dart VM。图2的Dart VM是不是不需要?
    2021-01-13
    1
    1
  • ...
    Android原生也是支持JIT和AOT的 所以是不是按道理原生也可以Hotreload
    2020-03-24
    3
    1
  • Lothar
    ios不支持运行时写内存和执行内存,那从这个角度hot reload是如何实现的呢?
    2021-12-11
  • szWest
    这里编译模式Script Snapshot是不是错了(太旧了?),实际上现在是Kernel Snapshot模式吧
    2021-03-30
    1
  • 张训博-forrest
    @作者 确认下release模式在运行时是不是不需要dart VM 看源码都是so文件了
    2021-01-19
    2
收起评论
显示
设置
留言
12
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部