Flutter widget生命周期和渲染逻辑

1. 生命周期相关逻辑

1.1 什么是生命周期

• 系统封装好的回调方法
• 开发者知道当前widget处于什么状态

1.2 生命周期作用

• 监听状态
• 在指定的时机初始化状态与数据
• 内存管理相关逻辑

2. widget生命周期

2.1 Stateless

• widget的构造方法
• widget的build方法

2.2 Statefull

• widget的构造方法
• widget中调用_state的构造方法
• state的init方法
• state的didChangeDependencies方法，此方法依赖InheritedWidget发生变化之后，也会调用。
• state的build方法，调用setState方法时，会调用build方法
• state的deactivate方法，在dispose方法之前调用
• 当销毁widget的时候调用dispose方法

3. widget渲染逻辑

3.1 widget子类

widget子类有StatefulWidget、StatelessWidget和RenderObjectWidget。前两个我们用的比较多。而RenderObjectWidget不会直接使用，但是有几个它的子类我们会经常用到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

3.2 RenderObjectWidget

继承于RenderObjectWidget的类，会加入到render tree中。Row和Colum间接的继承于RenderObjectWidget。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

我们来看看详细的继承关系：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

Row和Colum都是继承Flex，而Flex继承MultiChildRenderObjectWidget，MultiChildRenderObjectWidget继承RenderObjectWidget。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

注意：并不是所有的Widget都会被独立渲染！只有继承RenderObjectWidget的才会创建RenderObject对象！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

3.3 Flutter中的三棵树

Widget树、Element树和Render树 通过Android Studio窗口右边的‘Flutter Inspector’可以看到Widget树和Render树，如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

3.4Element树作用

在framework.dart中，查看StatelessWidget和StatefulWidget声明文档中，都会有一个createElement（）方法，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

StatelessWidget如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

StatefullWidget如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

每一个widget都会创建一个element对象，这样做的原因是Widget树是不稳定的，经常会有变动，如果没有element树，每次有一点变动，就去重新渲染界面，这样会很影响性能。而element树中的结点和widget树的结点是一一对应的，如果widget中某个结点变动了，element也只改动相应的结点，渲染时只需要渲染变动的结点即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

3.5 渲染逻辑

3.5.1 StatefullWidget渲染逻辑

StatefullWidget继承与Widget，系统会隐式调用createElement方法和mount方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

createElement方法实现只有一行代码，调用StatefulElement构造方法，参数是this，也就是StatefullWidget。如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

StatefulElement继承ComponentElement，系统自动调用mount方法在ComponentElement中有实现：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

mount中会调到rebuild方法，rebuild方法是在父类实现，最后调用performRebuild方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

用command+option+鼠标左键点击performRebuild看到列表，如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

看到该方法在CompontElement中实现，又跳回来了：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

其实就是调用rebuild方法的下面，在实现中看到调用了build方法，点击进去，利用上面说到的组合键，选择StatefulElement：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

回到了StatefulElement的类定义中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

_state.build(this)这个方法的调用的就是我们写的StatefulWidget代码中state的build方法。而state初始化是在StatefulElement构造时初始化的，调用的就是createState()，这个方法就是我们在写StatefulWidget中定义的createState()方法，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

参数this就是BuildContext context，也就是说context是element。通过BuildContext的定义注释也能证明：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

简单总结一下StatefullWidget的渲染流程：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

StatefullWidget会创建StatefulElement文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

• StatefulElement继承CompentElement
• 调用createState方法，创建State
• 将widget赋值给State
• 调用state的build方法，并且将自己（Element）传出去
• build里的context就是Widget的Element

3.5.2 StatelessWidget渲染逻辑

StatelessWidget相对简单很多：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

StatelessWidget会创建StatelessElement文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

• StatelessElement继承CompentElement
• 主要就是调用build方法，并且将自己（Element）传出去

3.5.3 RenderObjectWidget渲染逻辑

通过row或者colum的父类可以找到RenderObjectWidget，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

RenderObjectWidget会创建RenderElement文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19470.html

• RenderElement创建RenderObject
• Flutter会调用mount方法
• 调用createRanderObject方法