学习记录：Flutter中关于Widget、Element和RenderObject的区别与联系

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和更新操作。

补充：

文中的很多内容引用了一篇博客，但是时间有点久了，找不到了。

如有侵权，请联系我。