热重载工具的启动流程
研究热重载的价值：更方便对产品进行热更新，Dart代码编写完成Flutter.framework会以亚秒级别的速度进行更新渲染。
热重载原理中已经实现了热重载挂载，下面我们跟踪flutter_tools源码来探索热重载的流程
-
flutter_tools工程选择模拟器进行调试
指定模拟器
-
flutter_tools文件添加断点进行调试，查看args参数内容
断点调试
args参数就是上面Program arguments中配置的
-
main函数中对参数做分析，其中有一个非常重要的函数run
分析args参数
- 查看
run方法以及参数，run方法是一个异步方法
run方法参数
run方法查看
-
run方法执行完成，开始执行下一个方法runCommand
runCommand方法
设备信息
runCommand方法主要是参数的配置，模拟器、真机等设备的匹配就是在这个方法中。
-
runCommand方法中有一个重要方法setupTerminal，启动我们的终端
启动终端
- 查看
Running Xcode build...在什么时候打印？
查看控制台打印
mac.dart文件
buildCommands传入_runBuildWithRetries方法；flutter_tools服务端会调起一些指令传递给Xcode。
- 在源码中查找
控制台打印内容，控制台所有的打印都在setupTerminal方法中
image.png
image.png
- 启动虚拟机
启动虚拟机
虚拟机启动完毕
Debugger工具
Debugger调试工具
Debugger调试页面
Flutter工程启动完成会打开虚拟机、Debugger调试工具（用于监听项目）。
热重载底层找到增量文件
setupTerminal方法中最重要的就是监听listen，接收命令在_commonTerminalInputHandler中处理
setupTerminal方法中监听
处理命令
- 处理
r命令中调用restart进行热重载，restart方法便是热重载核心入口
处理r命令
image.png
断点调试最终执行到run_hot.dart文件中的restart方法内。
-
restart方法内查看与热重载相关的方法
image.png
image.png
- 点击进入查看
_hotReloadHelper回调
image.png
- 查看
_reloadSources源码实现
VM虚拟机
记录渲染时间
增量更新
- 查看
_updateDevFS增量更新方法源码
image.png
image.png
做增量渲染的代码在content.file文件中，即手机文件中；至此我们就找到了增量文件。
注意：增量渲染是以文件为单位，Dart文件中如果修改注释，也会作为更改文件进行重新渲染。
增量文件传输
上面Dart服务端已经能够获取增量文件了，那么Dart Sever端是如何把增量文件传递给Dart虚拟机的？
Dart虚拟机与Dart Serve端并不在一个地方
-
Dart Serve端把增量文件传递给Dart虚拟机
image.png
-
vmservice.dart文件的setUpVmService方法用来开启虚拟机
开启虚拟机
刚创建Dart Serve端的时候也会把虚拟机也打开。
- 注册虚拟机
image.png
执行hot_reload的时候就会调用Callback回调。
-
Dart虚拟机与Dart Serve端走的是RPC通信，即点对点的传输协议底层是Socket协议
image.png
热重载和引擎的联调
之前我们配置Runner项目与自定义引擎源码进行了关联，下面我们配置flutter_tools与自定义引擎源码进行关联？
配置Configurations
类似Runner工程配置FLUTTER_ENGINE与LOCAL_ENGINE
-
Program arguments配置完成之后，直接运行flutter_tools工程
image.png
- 下面使用
Xcode附加工程，使用Xcode调试
image.png
Xcode附加成功
- 打开
flutter_engine工程
flutter_engine工程
- 进行
断点调试
截屏2022-01-01 下午4.03.49.png
FlutterDart端、引擎端以及Dart Servc端进行了关联。
热重载渲染流程
热重载流程图
- 标注橙色的
Dart代码发生修改； -
Dart Sever服务端会去读取Dart代码，查看哪些代码发生了更改；以Dart文件为单位； -
Dart Sever服务端通过RPC协议会把更改的Dart代码给到Dart虚拟机，虚拟机在启动的时候就会加载，然后监听回调； -
Dart虚拟机也是通过RPC协议最终把更改的Dart代码给到Flutter.framework渲染引擎执行Reload进行重新渲染。
