Flutter: Widget、Element 和 RenderObject之间的关系?

1、简单介绍:
(1)Widget 树:Flutter 中万物皆为Widget
(2)Render树---渲染树:渲染树节点叫做 RenderObject,这个节点里面处理布局、绘制相关的事情。(作用)把我们写的 Widget 树的信息都渲染到界面上。
(3)Element 树:Widget 树是非常不稳定的,动不动就执行 build方法,一旦调用 build 方法意味着这个 Widget 依赖的所有其他 Widget 都会重新创建。(反例)如果 Flutter 直接解析 Widget树,将其转化为 RenderObject 树来直接进行渲染,那么将会是一个非常消耗性能的过程,那对应的肯定有一个东西来消化这些变化中的不便,来做cache。(结论)因此,这里就有另外一棵树 Element 树。(作用)Element 树这一层将 Widget 树的变化做了抽象,可以只将真正需要修改的部分同步到真实的 RenderObject 树中,最大程度降低对真实渲染视图的修改,提高渲染效率,而不是销毁整个渲染视图树重建。
(4)Layer 树:待补充???

2、Flutter 框架的的处理流程是这样的:
(1)根据 Widget 树生成一个 Element 树,Element 树中的节点都继承自 Element 类。
(2)根据 Element 树生成 Render 树(渲染树),渲染树中的节点都继承自RenderObject 类。
(3)根据渲染树生成 Layer 树,然后上屏显示,Layer 树中的节点都继承自 Layer 类。
Flutter: Widget、Element 和 RenderObject之间的关系?_第1张图片
3、(参考回答)
widget 树和 Element 树节点是一一对应关系,每一个 Widget 都会有其对应的 Element,但是 RenderObject 树则不然,只有需要渲染的 Widget 才会有对应的节点。
Element 树相当于一个中间层,它对 Widget 和 RenderObject 都有引用。当 Widget 不断变化的时候,将新 Widget 拿到 Element 来进行对比,看一下和之前保留的 Widget 类型和 Key 是否相同,如果都一样,那完全没有必要重新创建 Element 和 RenderObject,只需要更新里面的一些属性即可,这样可以以最小的开销更新 RenderObject,引擎在解析 RenderObject 的时候,发现只有属性修改了,那么也可以以最小的开销来做渲染。

你可能感兴趣的:(Flutter,flutter)