Flutter中widget的生命周期和渲染原理

一、生命周期的基本概念
a、什么是生命周期? 说白了就是回调方法,让你知道封装好的这个widget处于一个什么状态,不断回调。
b、生命周期的作用:

 1、可以监听widget事件,做出相应处理;
 2、初始化数据等,如创建数据,发送网络请求;
 3、内存管理:销毁数据、监听者、Timer等。

二、Widget的生命周期
widget有两种,一直无状态的(Stateless)、一种有状态的(Stateful)
Statelessb生命周期:
构造方法和build方法。
Stateful生命周期:
包含两个对象,widget、State。

1、widget构造方法;
2、widget的CreateState()方法
3、State的构造方法
4、State的initState方法
5、didChangeDependencies方法(改变依赖关系),依赖的InheritedWidget发生变化之后,方法也会调用!
6、State的build方法,当调用setState()方法,会重新调用build进行渲染!
7、当Widget销毁的时候,调用State的dispose()方法。

三、Widget的渲染原理
在flutter渲染的流程中,有三颗重要的树!Widget树、Element树、Render树。并不是所有的Widget都会被独立渲染!只有继承RenderObjectWidget的才会创建RenderObject对象!才会被Flutter引擎渲染。Flutter引擎是针对Render树进行渲染的。

三棵树的联系:
1、每一个Widget都会创建一个Element对象;
2、隐式调用createElement方法,Element加入Element树中(它会创建三种Element);
3、继承RenderObjectWidget的Widget会创建RenderElement;
RenderElement主要是创建RenderObject对象,分为两步:创建RanderElement,Flutter会调用mount方法,调用createRanderObject方法。
4、StatefulWidget会创建StatefulElement,StatefulElement继承ComponentElement;

createElement 方法中,调用createState方法,持有state。将自己(Element)和widget给state持有。
 创建流程:
      a、widget调用createState方法,创建State;
      b、将Widget赋值给state;
      c、调用state的build方法 并且将自己(Element)传出去。

5、StatelessWidget会创建StatelessElement,StatelessElement继承ComponentElement;
主要就是调用build方法 并且将自己(Element)传出去。

几个知识点
1、Element树是一个管理widget树和Rander树的上下文,build方法中context,本质就是Element。
2、Flutter的渲染是增量渲染,Element是可以被复用的;
3、widget不在widget树中就会被释放,想要不被释放,一定要持有在widget树中;
初学Flutter,会有一个很奇怪的现象,持有一个widget,我用全局数组,属性等强持有一个widget,但是widget依然会被释放。

怎样做到widget不释放且保持状态呢?
需要做到三点:
1、widget被加入widget树中;(被其他显示中的widget持有)
2、State 后面加上 with AutomaticKeepAliveClientMixin
3、重写wantKeepAlive方法。

posted @ 2021-05-17 11:31  JustToGo  阅读(508)  评论(0编辑  收藏  举报