Flutter - Hot Reload

flutter 通过 Hot Reload 可以实现代码的动态刷新,可以帮助开发者方便快速的调试代码,构建 UI,主要是调试UI。

使用

Android Studio上直接cmd+s保存代码就会启动Hot Reload,需要注意的是只有 Debug 模式才能使用 Hot Reload。

工作原理

Hot Reload 只能在 Debug 模式下使用,是因为 Debug 模式下,Flutter 采用的是 JIT 动态编译,代码是运行在 Dart VM 上,JIT 将 Dart 编译成可以运行在 Dart VM 上的 Dart Kernel,Dart Kernel 可以动态更新,所以就实现了代码的实时更新功能。

当调用 Hot Reload 时:

  • 首先会扫描代码,找到上次编译之后有变化的 Dart 代码。
  • 在将这些变化的 Dart 代码转化为增量的 Dart Kernel 文件。
  • 将增量的 Dart Kernel 文件发送到正在移动设备上运行的 Dart VM。
  • Dart VM 会将发来的增量 Dart Kernel 文件和原有的 Dart Kernel 文件合并,然后重新加载全新的 Dart Kernel。
  • 重新加载了 Dart Kernel,却不会重新执行代码,而是通知 Flutter Framework 重建 Widget。

所以 Flutter 的 Hot Reload 并不会重新执行一遍代码,而是触发 Flutter 重新绘制,并且会保留 Flutter 之前的状态,所以 Hot Reload 也被称为有状态的热重载。

不能使用 Hot Reload 的场景

在理解了 Hot Reload 的原理之后,可以看到 Hot Reload 的使用场景是有一些限制的,接下来我们在看一下不能使用 Hot Reload的 场景:

1. 代码更改会影响 APP 状态的不能使用 Hot Reload

如果你的代码更改会影响 APP 的状态,使得代码更改之后的状态和代码更改之前的状态不一样,那么 Hot Reload 就不会生效,例如:

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return GestureDetector(onTap: () => print('T'));
  }
}

这段代码,运行 App 之后,将 StatelessWidget 改为 StatefulWidget:

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> { /*...*/ }

因为 Hot Reload 会保留状态,在代码更改之前,MyWidget 是 StatelessWidget ,将 StatelessWidget 改为 StatefulWidget ,如果 Hot Reload 成功,那么 MyWidget 会变成 StatefulWidget ,与它之前的状态就会不兼容的,所以 Hot Reload 是不会成功的。

2. 全局变量( global variables)和静态字段(static fields)的更改不能使用 Hot Reload

在 Flutter 中,全局变量和静态字段被视为状态,因此在 Hot Reload 期间不会重新初始化。

如下的代码:

final sampleTable = [
Table("T1"),
Table("T2"),
Table("T3"),
Table("T4"),
];
运行 App 之后,如果做了如下的更改:

final sampleTable = [
Table("T1"),
Table("T2"),
Table("T3"),
Table("T10"), // 修改这里的值
];
运行 Hot Reload,是不会成功的,所以全局变量和静态字段不能使用 Hot Reload。

3. main() 方法里的更改不能使用 Hot Reload

因为 main() 方法不会因重建窗口小部件树而重新执行,所以更改 main() 方法里的代码,不会在 Hot Reload 之后看到效果。

例如,如下的代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return GestureDetector(onTap: () => print('tapped'));
  }
}

在运行App后,更改如下:

import 'package:flutter/widgets.dart';

void main() {
  runApp(const Center(
      child: const Text('Hello', textDirection: TextDirection.ltr)));
}

Hot Reload 之后,不会看到任何变化。

  1. 枚举类型更改为常规的类或者常规的类变为枚举类型也不能使用 HotReload
    例如,如下的例子:
enum Color {
  red,
  green,
  blue
}

改为:

class Color {
  Color(this.i, this.j);
  final int i;
  final int j;
  }
  1. 修改通用类型声明也不能使用 HotReload
    例如,如下的例子:
class A<T> {
  T i;
}

改为:

class A<T, V> {
  T i;
  V v;
}

Hot Reload VS Hot Restart

针对上面不能使用 Hot Reload 的情况,就需要使用 Hot Restart。Hot Restart 可以完全重启您的应用程序,但却不用结束调试会话。这个特性可以用来快速调试代码,对于业务代码可能会出现 Hot Restart 失败的情况,这时直接 Hot Reload 也就是直接run就行了,Hot Restart 大部分使用场景还是用来调整UI或者业务代码上小而不改变状态的改动。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容

  • 前面已经将 Flutter 运行起来了,然后打开 main.dart ,看到如下的代码: 找到下面的代码: 将这行...
    zhx喜籽阅读 1,504评论 0 2
  • Hot Reload 的工作原理 Hot Reload 只能在 Debug 模式下使用,是因为 Debug 模式下...
    向上_d821阅读 2,297评论 0 0
  • 一.别人给你私信时能看到的效果如下图: 有两种功能:1.链接别的地址(点击百度会跳转到百度页面)。2.自动回复信...
    lvc阅读 2,153评论 0 1
  • 过去的2017年,发生了许多事情,有好的,有不好的,不管怎样都已经过去了,只是希望2018年,我还能做最真的自已。...
    芯沫慕蕊阅读 120评论 0 0
  • 简书日记第31天 万事开头难 我喜欢阅读,上小学时喜欢读琼瑶的作品,中学爱上了金庸的武侠小说,后来喜欢读三毛、张爱...
    8bd6b4eb2e57阅读 151评论 2 1