Widget、Element、RenderObject三者之间的关系

WidgetTree:存放渲染内容、它只是一个配置数据结构，创建是非常轻量的，在页面刷新的过程中随时会重建

Element 是分离 WidgetTree 和真正的渲染对象的中间层， WidgetTree 用来描述对应的Element 属性,同时持有Widget和RenderObject，存放上下文信息，通过它来遍历视图树，支撑UI结构。

RenderObject (渲染树)用于应用界面的布局和绘制，负责真正的渲染，保存了元素的大小，布局等信息，实例化一个 RenderObject 是非常耗能的

当应用启动时 Flutter 会遍历并创建所有的 Widget 形成 Widget Tree，通过调用 Widget 上的 createElement() 方法创建每个 Element 对象，形成 Element Tree。最后调用 Element 的 createRenderObject() 方法创建每个渲染对象，形成一个 Render Tree。

 

 

 

其中Widget与Element是一对多的关系,Element与RenderObject不是一一对应的关系，只有真正需要渲染的Widget才有RenderObject。

RenderObjectElement 会调用 createRenderObject() 方法创建每个渲染对象。ComponentElement就不会创建渲染对象。

作者：Qphine
链接：https://www.jianshu.com/p/9064a68a05ae
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。