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

Flutter之Hot Reload的工作原理

作者: 和蔼的阿登 | 来源:发表于2019-05-20 11:43 被阅读0次

        对于很多flutter的初学者来说,我们了解到flutter有个很亮眼的功能就是可以热加载从而增加我们的开发效率,但是我们却很少了解到其中的原理,今天我就来简单说下热加载的原理以及它的作用范围。

一、原理概述

        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文件(这时候不会重新执行代码),最后通知Flutter Framework重新构建Widget(Flutter的大多数视图刷新都是因为重构了Widget,但是此时会保留Flutter的之前状态);

三、不能使用Hot Reload的场景

        通过我们对Hot Reload的进一步理解之后,相信我们可以想到Hot Reload的使用场景是有限制的,接下来我们用一些实例来看一下常用哪些场景下不能使用Hot Reload。

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

2、Widget的状态更改不能使用 Hot Reload

我们都知道Flutter的Widget有两种状态:StatelessWidget和 StatefulWidget,当我们改变了当前页面的Widget状态,涉及到setState(() {});里相关变量更改状态, Hot Reload是不会成功的,因为Hot Reload是保留状态的操作。

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

修改前 修改后

4、修改通用类型声明时

修改前 修改后

        总而言之,最适合 Hot Reload 的场景就是写布局的时候,如果是其他场景,尤其是写业务逻辑的时候,一不小心就会碰到无法使用 Hot Reload 的场景,所以我们在开发时就要合理的运用Hot Reload来进行开发了。

相关文章

  • 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/xvshzqtx.html