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不会直接使用，可是有几个它的子类咱们会常常用到。

3.2 RenderObjectWidget

继承于RenderObjectWidget的类，会加入到render tree中。Row和Colum间接的继承于RenderObjectWidget。

咱们来看看详细的继承关系：

Row和Colum都是继承Flex，而Flex继承MultiChildRenderObjectWidget，MultiChildRenderObjectWidget继承RenderObjectWidget。

注意：并非全部的Widget都会被独立渲染！只有继承RenderObjectWidget的才会建立RenderObject对象！

3.3 Flutter中的三棵树

Widget树、Element树和Render树 经过Android Studio窗口右边的‘Flutter Inspector’能够看到Widget树和Render树，如图：

3.4Element树做用

在framework.dart中，查看StatelessWidget和StatefulWidget声明文档中，都会有一个createElement（）方法，

StatelessWidget如图：

StatefullWidget如图：

每个widget都会建立一个element对象，这样作的缘由是Widget树是不稳定的，常常会有变更，若是没有element树，每次有一点变更，就去从新渲染界面，这样会很影响性能。

而element树中的结点和widget树的结点是一一对应的，若是widget中某个结点变更了，element也只改动相应的结点，渲染时只须要渲染变更的结点便可。

3.5 渲染逻辑

3.5.1 StatefullWidget渲染逻辑

StatefullWidget继承与Widget，系统会隐式调用createElement方法和mount方法。

createElement方法实现只有一行代码，调用StatefulElement构造方法，参数是this，也就是StatefullWidget。如图：

StatefulElement继承ComponentElement，系统自动调用mount方法在ComponentElement中有实现：

mount中会调到rebuild方法，rebuild方法是在父类实现，最后调用performRebuild方法：

用command+option+鼠标左键点击performRebuild看到列表，如图：

看到该方法在CompontElement中实现，又跳回来了：

其实就是调用rebuild方法的下面，在实现中看到调用了build方法，点击进去，利用上面说到的组合键，选择StatefulElement：

回到了StatefulElement的类定义中

_state.build(this)这个方法的调用的就是咱们写的StatefulWidget代码中state的build方法。而state初始化是在StatefulElement构造时初始化的，调用的就是createState()，这个方法就是咱们在写StatefulWidget中定义的createState()方法，

参数this就是BuildContext context，也就是说context是element。经过BuildContext的定义注释也能证实：

简单总结一下StatefullWidget的渲染流程：

StatefullWidget会建立StatefulElement

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

3.5.2 StatelessWidget渲染逻辑

StatelessWidget相对简单不少：

StatelessWidget会建立StatelessElement

• StatelessElement继承CompentElement
• 主要就是调用build方法，而且将本身（Element）传出去

3.5.3 RenderObjectWidget渲染逻辑

经过row或者colum的父类能够找到RenderObjectWidget，

RenderObjectWidget会建立RenderElement

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