「这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」。
- 渲染原理主要是3个树，
widget树，render树，element树。
1. widget树和render树
Widget树主要是我们flutter开发中一层一层的widget包裹的，比我我们之前例子就是
如果直接渲染widget是非常耗费性能的，因为widget经常发生变化，就会build。flutter其实渲染的是render树，但是不是所有的widget都继承renderObjectWidget，比如 Container就继承 StatelessWidget
在继承widget
而比如Column 继承Flex
Flex继承 MultiChildRenderObjectWidget之后继承renderObjectWidget
因此只有继承renderObjectWidget 才能创建renderObject对象，才能被渲染引擎直接渲染。
renderObjectWidget
我们查看下renderObjectWidget，主要看下面2个方法，关于createElement，下面会讲Element树的时候讲。先看下createRenderObject
在我们之前查看Column继承Flex的时候有实现这个方法，会返回一个RenderFlex
RenderFlex 继承 RenderBox
最后继承renderObject
所以渲染过程：当Widget的对象继承renderObject的时候，子类实现父类的方法createRenderObject创建renderObject对象 加入render树中，进行独立渲染。
2. Element树
每一个widget对象都会建创会都一个Element对象，我们之前看renderObject中存在createElement方法。 我们之前的Flex 继承 MultiChildRenderObjectWidget，里面实现了该方法
继承
RenderObjectElement
我们之前查看的Column是继承于RenderObjectWidget ,有的widget直接继承Widget，没有renderObject，那么是否存在Element
只要是Widget都会创建一个element，因此widget树和element树是一一对应的。
我们打开debug模式，创建断点
跳过进入下一步会进入
mount方法
查看mount方法 我们会通过
mount方法把我们创建的element添加到element树中。 对于renderObject，是否也是一样的呢，我们查看之前Column的renderObject创建
在创建之前会调用
elemen.mount,说明element创建完成后才调用createRenderObject
首先创建widget，之后调用createElement方法创建element，之后调用amount方法加入element树，如果widget继承renderObjectWidget，就会在amount中创建renderObject之后加入render树。
3.Stateless的Element
Stateless的Element是StatelessElement 继承
ComponentElement
里面 amount方法，其中有个
_firstBuild方法，我们继续查看会调用rebuild方法
我们不用关注这些判断，主要看performRebuid方法，我们shift+command+B查看实现的地方。
我们查看实现方法主要看build实现
我们的StatelessElement继承ComponentElement，我们继续查看子类实现build的方法。
这里的widget就是StatelessWidget，this就是StatelessElement实现build方法
我们在外部调用进行渲染
4. Stateful的Element
相比
StatelessElement多了一步 _state = widget.createState()，在创建element的同时创建了state，并保存下来。
并把创建的widget和element都赋值给了
state。
之后调用不同的是通过state的build方法，其他的都是和StatelessElement一样。
5. 总结
每一个Widget创建都会创建一个Element对象，通过调用createElement方法 把创建的Element加入Element树中，之后会调用amount方法，amount方法会判断，如果widget继承renderObjectWidget，就会在amount中创建renderObject之后加入render树。对于StatelessElement和StatefulElement都是继承ComponentElement，通过调用build方法，把自己传递出去。StatefulElement多了一个createState。
画个大概的流程图：