Flutter Widget、Element 和 RenderObject 的区别
- Widget、Element 和 RenderObject 的三者通过分工（描述、管理和渲染）和协作，实现高效、灵活的 UI 渲染和更新机制
Widget 组件
- Widget 用于声明式地（声明式 UI）描述界面元素的外观和行为，不直接处理渲染绘制
- Widget 都是不可变的，当 Widget 的属性改变时，需要通过重建 Widget 来反映这种变化
- Widget 树由多个 Widget 嵌套组合形成，描述了 UI 的层级关系
Element 元素
- Element 是 Widget 树在引擎中的实例化对象，是 UI 树的真实节点，负责管理 Widget 的生命周期和状态，并创建对应的 RenderObject，将 Widget 的配置参数（描述信息）转化为具体的渲染指令
- Element 协调 Widget 与 RenderObject 之间的绑定关系，当 Widget 更新时，Element 会对比新旧 Widget 的差异，决定是否复用 Element，避免重复创建 Element 和 RenderObject
- 一个 Widget 对应一个 Element，通过调用 Widget 的 createElement 方法生成对应的 Element 对象
RenderObject 渲染对象
- RenderObject 是实际负责布局和绘制的对象，是渲染树中的节点，直接操作底层渲染引擎（比如 Skia）
- 一个 Element 不一定对应一个 RenderObject，并非所有 Element 都会创建 RenderObject（比如部分 Widget 的 Element 本身不直接创建 RenderObject，而是通过其子 Widget 的 Element 来创建 RenderObject）
总结
- 因为 Widget 不涉及渲染，所以更新代价很小，而 RenderObject 负责 UI 渲染，所以更新代价极大，于是 Element 就负责将 Widget 树的变更以最小的代价映射到 RenderObject 树上，可以通过复用 Element 来减少频繁创建和销毁 RenderObject