美文网首页Flutter
Flutter之Hot Reload 的工作原理

Flutter之Hot Reload 的工作原理

作者: 向上_d821 | 来源:发表于2019-07-03 09:17 被阅读0次

Hot Reload 的工作原理

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

当调用 Hot Reload 时:

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

所以 Flutter 的 Hot Reload 并不会重新执行一遍代码,而是触发 Flutter 重新绘制,并且会保留 Flutter 之前的状态(注:当你退出APP,再进来的时候,状态是Hot Reload之前的状态,想要修改后的状态需要Hot Restart),所以 Hot Reload 也被称为有状态的热重载。

不能使用 Hot Reload 的场景

1. 代码出现编译错误的不能使用 Hot Reload

当代码更改引入编译错误时,肯定不能使用 Hot Reload。所以要先解决编译错误,在使用 Hot Reload。

2. 代码更改会影响 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 是不会成功的。

3. 全局变量( 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。

4. 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 之后,不会看到任何变化。

5. 枚举类型更改为常规的类或者常规的类变为枚举类型也不能使用 HotReload

例如,如下的例子:

enum Color {
  red,
  green,
  blue
}

改为:

class Color {
  Color(this.i, this.j);
  final int i;
  final int j;
  }
6. 修改通用类型声明也不能使用 HotReload

例如,如下的例子:

class A<T> {
  T i;
}

改为:

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

总结

最适合 Hot Reload 的场景就是写布局的时候,如果是其他场景,尤其是写业务逻辑的时候,一不小心就会碰到无法使用 Hot Reload 的场景,所以当你发现 Hot Reload 不生效的时候,就使用 Hot Restart 吧,Hot Restart 也一样很快。

参考:小德_REN的Flutter完全手册 :https://juejin.im/book/5c5423ef6fb9a049cd54a213

相关文章

  • Flutter之Hot Reload 的工作原理

    Hot Reload 的工作原理 Hot Reload 只能在 Debug 模式下使用,是因为 Debug 模式下...

  • Flutter之Hot Reload的工作原理

    对于很多flutter的初学者来说,我们了解到flutter有个很亮眼的功能就是可以热加载从而增加我们的开...

  • Flutter - Hot Reload

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

  • Flutter知识点一

    1.Flutter module支持hot reload (热重载)进入到flutter module目录下 执行...

  • flutter 热重载

    flutter 热重载 官方文档 文章来源 Flutter的热重载(hot reload)功能可以帮助您在无需重新...

  • 揭秘Flutter Hot Reload(原理篇)

    1. 前言 闲鱼技术团队在2018年引入Flutter,目前越来越多的业务场景在Flutter上使用。Flutte...

  • Flutter Hot Reload揭秘

    作者:闲鱼技术-君爱 1. 前言 闲鱼技术团队在2018年引入Flutter,目前越来越多的业务场景在Flutte...

  • Error waiting for a debug connec

    最近入坑flutter,刚想体验hot reload的飞速快感时,却出现“Error waiting for a ...

  • flutter的hot reload和hot restart

    他们在哪里? 看图说话: 他们的区别是什么 如果修改了状态相关的代码则需要hot restart,否则只需要hot...

  • Flutter 问题合集

    收录Flutter踩坑中遇见的问题和解决办法。 无法Hot Reload,提示Error connecting t...

网友评论

    本文标题:Flutter之Hot Reload 的工作原理

    本文链接:https://www.haomeiwen.com/subject/mvufhctx.html