flutter中Widget 渲染过程

先看一张图：

flutter中Widget 渲染过程

Flutter 渲染过程，可以分为这么三步：

首先，通过 Widget 树生成对应的 Element 树；

然后，通过Element树构建RenderObject对象;并将RenderObject对象挂载到Element树上。

最后，通过Elemen树t和RenderObject对象构建成 RenderObject 树，以完成最终的渲染。

可以看到，Element 同时持有 Widget 和 RenderObject。而无论是 Widget 还是 Element，其实都不负责最后的渲染，只负责发号施令，真正去干活儿的只有 RenderObject。

为什么要这样做呢？

因为Widget 具有不可变性，但 Element 却是可变的。实际上，Element 树这一层将 Widget 树的变更（类似 React 虚拟 DOM diff）做了抽象，可以只将真正需要修改的部分同步到真实的 RenderObject 树中，最大程度降低对真实渲染视图的修改，提高渲染效率，而不是销毁整个渲染视图树重建。

Element 是 Widget 的一个实例化对象，将 Widget 树的变化做了抽象，能够做到只将真正需要修改的部分同步到真实的 Render Object 树中，最大程度地优化了从结构化的配置信息到完成最终渲染的过程；而 RenderObject，则负责实现视图的最终呈现，通过布局、绘制完成界面的展示。

再看一个对比：

对比vue

如果用 Vue 来比喻的话，Widget 就是 Vue 的 template；Element 就是 virtual DOM；RenderObject 就是DOM，

对比React

React：JSX->虚拟DOM->浏览器DOM

React Native：JSX->虚拟DOM->Android/iOS原生控件

flutter：Widget->Element（类似虚拟DOM，只是一种数据结构）-> RenderObject 交给底层渲染