1、RenderObject树
Flutter引擎需要把我们写的Widget树的信息渲染到页面上,这样人眼才能看到。跟渲染有关的是一棵RenderObject 树,渲染节点叫做RenderObject,这个节点里面处理布局、绘制相关的事情。Widget树和渲染树的节点并不是一一对应的关系,有些Widget是需要展示的,而又有些例如继承自StatelessWidget或者StatefulWidget的Widget只是将其他的Widget做一个组合,这些Widget本身并不需要展示,因此在RenderObject树上面并没有对应的节点。
2、Element树
Widget树由于会执行Build方法,所以结构不稳定,一旦调用build方法意味着这个Widget依赖的其他的Widget都会重新创建,如果Flutter直接解析Widget树,将其转化为RenderObject树来直接进行渲染,那将会是一个很消耗性能的过程,所以便出现了Element树来解决这一不便。Element树这一层将Widget树的变化做了抽象,可以只将真正需要修改的部分同步到RenderObject树中,最大程度上降低了对真实渲染视图的修改,提高了渲染效率,而不是销毁视图树重建。
-------------------------------------------------------------------------------------------------------------------------
由上面的我们可以知道,widget树和Element树是一一对应的关系,每一个Widget都会有其对应的ELement,但是RenderObject树则不是,只有需要渲染的Widget才会有对应的节点。Element树相当于一个中间层,它对Widget和RenderObject都有引用。当Widget不断变化时,将Widget拿到Element层面进行对比,如果和之前保留的Widget和Key的类型一致,那么没有必要重新创建Element和RenderObject,只需要更新里面的一些属性即可,这样就会以最小的开销跟新RenderObject,引擎在解析RenderObject的时候,发现只有属性修改了,便也可以以最小的开销做渲染。
简而言之,Widget树就是配置信息的树(就是我们平时写的那些代码),RenderObject树就是渲染树,负责计算布局和绘制,Flutter引擎就是根据这棵树做渲染的,Element树作为中间管理者,管理Widget生成RenderObject和更新操作。
补充:
文中的很多内容引用了一篇博客,但是时间有点久了,找不到了。
如有侵权,请联系我。