Element Tree: Widget tree的实例化对象,创建出renderObject,并关联到element.renderobject属性上,最后完成RenderObject Tree的创建。
RenderObject Tree:完成布局和图层绘制,输出LayerTree, 然后交给skia渲染。
Flutter渲染划分为三棵树的其核心价值是, 页面的更新,可以根据Element变化的内容,只修改对应的RenderObject Tree,即进行增量更新。
在三棵树的构建过程中,创建RenderObject是最为耗时的操作。Flutter判断是否需要重新创建RenderObject节点,主要是根据Element Tree的 runtimeType和key两个字段进行判断。两者任何一个有变化,RenderObject节点就需要重建,否则只需更新RenderObject节点的属性即可。
如下图所示:
当Widget发生变化时,对比Element tree上对应位置上新旧Widget是否一致,只有不一致时才会重建Element并重建并重新进行RenderObject实例化。即RenderObject Tree只需进行增量的重建即可,这就大大提升了渲染效率。