# Dynamic

# 简介

Dynamic 模块允许我们加载下发或者缓存的 JSON 来完成渲染。

语义接近 Flutter 原始组件名称，所以在设置组件名时一般使用 Flutter 对应的 Widget 名称，具体映射关系可参照文档

实现上 Dynamic 会将传入的 JSON 字符串反序列化成内置对象模型，然后生成 Widget 树，最后将该树根节点传递给容器组件。

# 使用说明

由于 Google 在 Flutter 上禁用 dart:mirrors 导致动态性较弱，所以 Dynamic 是基于 Flutter 组件基础上做了封装，对一些交互性较强的场景暂时不能支持，推荐在一些静态显示区域做动态化下发和缓存的尝试。

Dynamic 会对传入的字符串进行 JSON 解析，但你也可以自行把其他格式比如 XML 或者 Protobuf 解析成指定模型对象，然后传递给容器视图，依旧可以完成 UI 的渲染。

当你下发数据时，可以给指定的容器设置占位的 loading 组件如下图所示:

# 性能

# 耗时

这里选用简介上方的示例图 Extend GitHub Demo ，该 json 字符串长度为 5068 ，最深嵌套层级为 9 ，下面为不同设备上的时间消耗：

阶段 \ 设备	iPhone 7 Plus	iPhone X	OnePlus 7 Pro
JSON 解析	1 ~ 8 ms	1 ~ 10 ms	2 ~ 16 ms
生成 Content Widget	0 ~ 2 ms	0 ~ 1 ms	0 ~ 3 ms
组件初始化到首帧总耗时	54 ~ 106 ms	41 ~ 75 ms	85 ~ 160 ms

可以看到 Dynamic 引入的相关耗时较低，主要时间消耗依旧在渲染视图阶段。

# 帧率

帧率方面 ( 来自 OnePlus 7 Pro 的数据 ) , 渲染组件树加 push 动画过程中，最长一帧绘制时间为 30 ~ 40 ms，而大部分时间集中在 6 ~ 10 ms / frame，以某一次时间帧率波动为例：

而渲染一个相同原生组件树的帧率波动与 Dynamic 是相似的，并无明显差异。

# 内存

同样是 Extend GitHub Demo，某一时刻内存快照排名前十的对象如下：

Dynamic 模型前五如下:

相对而言，组件树上的对象在内存中占比相对较高但同样也需要注意动态渲染模型的数量不要过多。