Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

35 | Hot Reload是怎么做到的?

陈航 2019-09-17
你好,我是陈航。
在上一篇文章中,我与你分享了 Flutter 的 Debug 与 Release 编译模式,以及如何通过断言与编译常数来精准识别当前代码所运行的编译模式,从而写出只在 Debug 或 Release 模式下生效的代码。
另外,对于在开发期与发布期分别使用不同的配置环境,Flutter 也提供了支持。我们可以将应用中可配置的部分进行封装抽象,使用配置多入口的方式,通过 InheritedWidget 来为应用的启动注入环境配置。
如果你有过原生应用的开发经历,那你一定知道在原生应用开发时,如果我们想要在硬件设备上看到调整后的运行效果,在完成了代码修改后,必须要经过漫长的重新编译,才能同步到设备上。
而 Flutter 则不然,由于 Debug 模式支持 JIT,并且为开发期的运行和调试提供了大量优化,因此代码修改后,我们可以通过亚秒级的热重载(Hot Reload)进行增量代码的快速刷新,而无需经过全量的代码编译,从而大大缩短了从代码修改到看到修改产生的变化之间所需要的时间。
比如,在开发页面的过程中,当我们点击按钮出现一个弹窗的时候,发现弹窗标题没有对齐,这时候只要修改标题的对齐样式,然后保存,在代码并没有重新编译的情况下,标题样式就发生了改变,感觉就像是在 UI 编辑面板中直接修改元素样式一样,非常方便。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

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

    作者回复: 赞

    2019-09-17
收起评论
4
返回
顶部