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就不会创建渲染对象。

 

Widget 定义了应用界面的结构。

Element 管理这些结构的实例化和生命周期。

RenderObject 负责将这些结构绘制到屏幕上。

这三者共同工作，确保Flutter应用能够高效且灵活地响应用户交互和状态变化。