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 类。
在这里插入图片描述
3、(参考回答)
widget 树和 Element 树节点是一一对应关系,每一个 Widget 都会有其对应的 Element,但是 RenderObject 树则不然,只有需要渲染的 Widget 才会有对应的节点。
Element 树相当于一个中间层,它对 Widget 和 RenderObject 都有引用。当 Widget 不断变化的时候,将新 Widget 拿到 Element 来进行对比,看一下和之前保留的 Widget 类型和 Key 是否相同,如果都一样,那完全没有必要重新创建 Element 和 RenderObject,只需要更新里面的一些属性即可,这样可以以最小的开销更新 RenderObject,引擎在解析 RenderObject 的时候,发现只有属性修改了,那么也可以以最小的开销来做渲染。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值