Flutter - Widget生命周期与渲染原理

生命周期的基本概念：
生命周期的本质上就是回调方法，这个回调方法能够让我们知道这个widget处于一个什么样的状态。我们可以实现这个方法去监听widget的生命周期。
生命周期的作用：

• 监听widget事件
• 初始化数据，创建数据，发送网络请求等等
• 内存管理，数据销毁，监听销毁等等
  Widget的生命周期

StatelessWidget

无状态的widget比较简单，StatelessWidget只有一个build方法和构造方法
StatelessWidget会在底层调用
StatelessElement createElement() => StatelessElement(this);这个方法来创建一个Element树，在StatelessElement中调用
Widget build() => widget.build(this);来构建widget。

• 构造方法
• build方法
  代码验证一下

class LessApp extends StatelessWidget {
  final String title;
  LessApp({this.title}){
    print('构造函数被调用了');
  }
  @override
  Widget build(BuildContext context) {
     print('build被调用了');
    return Center(
      child: Text('hello flutter'),
    );
  }
}

上面运行的结果

运行结果

StatefulWidget

StatefulWidget包含两个对象Widget和State，下面介绍一下它的生命周期

• Widget构造方法
• Widget的createState
• State的构造方法
• State的initState方法
  源码解释：Called when this object is inserted into the tree.当这个对象被添加到Widget树中会被调用
• didChangeDependencies方法（依赖关系改变）
  源码解释：Called when a dependency of this [State] object changes.当该[State]对象的依赖项发生更改时调用。
• State的build方法
  我们可以看下源码，在StatefulWidget源码里面会创建一个 Element
  StatefulElement createElement() => StatefulElement(this);
  StatefulElement里面会创建一个状态_state，然后会重写build方法
  Widget build() => _state.build(this);这个this就是MaterialApp，MaterialApp的Scaffold的body是下面的代码中的StateApp，这样就掉用到了该State下的build方法，同时将widget保存在_state中_state._widget = widget;这也是为什么在state中能够使用widget来访问变量，其他的地方则不行的原因。
• didUpdateWidget
  这个一般用在状态改变，并且沿着widget传值使用，比如调用了setState.
  实际上这里flutter框架会创建一个新的Widget,绑定本State，并在这个函数中传递老的Widget。
  这个函数一般用于比较新、老Widget，看看哪些属性改变了
• deactivate
  Called when this object is removed from the tree.当这个对象从渲染树中移除的时候会调用这个方法。（即将销毁）
• dispose
  Called when this object is removed from the tree permanently，当对象从渲染树上已经移除调用该方法。
  下面使用示例来详细说明，我们设置了一个按钮和一个text，点击按钮text文字会增量变化。

class StateApp extends StatefulWidget {
  final String title;
  StateApp({this.title}){
    print('构造函数被调用了');
  }
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
  _MyAppState(){

    print('State的构造方法来了');
  }
 int _count =0;

  @override
  void initState() {
    print('State的init来了');
    // TODO: implement initState
    super.initState();

  }
  @override
  Widget build(BuildContext context) {
    print('State的build来了');
    return Column(
      children: [
        SizedBox(height: 200,),
        RaisedButton(
          child: Icon(Icons.add),
            onPressed: (){
             _count++;
             setState(() {

             });
            }
        ),
        Text('$_count'),
      ],
    );
  }
  @override
  void dispose() {
    // TODO: implement dispose
    print('dispose来了');
    super.dispose();
  }
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
 @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
  }
  
  
}

上面这段代码的运行结果

截屏2020-06-16 14.30.21.png

然后我们点击按钮，每次点击都会重新调用build方法改变界面。为什么呢，因为当我们调用setState的时候，追踪源码发现它调用的是 _element.markNeedsBuild()->rebuild()-> _dirtyElements.add(element)重新加到Element树中进行渲染。

Widget渲染原理

首先flutter中有三棵树，Widget树、Element树、Render树

• Widget Tree ：隐式调用createElement方法
  flutter引擎并不是直接渲染Widget树，因为widget每一次build都会重新创建，widget非常不稳定，如果直接渲染性能消耗严重，所以widget不是引擎直接渲染的树。
  每一个Widget都会创建一个Element对象，隐式调用createElement方法，Element加入Element树中。
• Element Tree有三中RenderElement、StatefulElement、StatelessElement。

RenderElement
主要是创建RenderObject对象
1.创建RanderElement，只要加入Element树里面就会执行mount方法（createElement执行完就会调用）
2.Flutter会调用mount方法，调用createRanderObject方法

StatefulElement
StatefulElement继承ComponentElement
1.调用createState方法，创建State
2.将Widget赋值给state
3.调用state的build方法 并且将自己（Element）传出去，build里面的context 就是Widget的Element。

StatelessElement
StatelessElement继承ComponentElement
1.StatelessWidget会创建StatelessElement
2.主要就是调用build方法 并且将自己（Element）传出去。

• Render Tree：RenderElement主要是创建RenderObject对象
  我们的渲染引擎直接渲染的是Render树，Render树放的是RenderObject对象，追踪源码可以得知并不是所有的widget都会加入到Render中，比如我们的StatelessWidget、和StatefulWidget就不是继承RenderObjectWidget。总结：并不是所有的widget都会被独立渲染，只有继承RenderObjectWidget的才会创建RenderObject对象，才会被加入到Render Tree。

总结：上文中我们已经知道flutter直接渲染的是Render树，而widget树非常不稳定，那么就需要一个桥梁来对比老的widget和新的widget有什么样的变化，这个桥梁就是Element树，创建widget与之对应就会创建一个一模一样的Element树。Element既引用widget树同时也通知Render树哪些是变化的，哪些是没有变化的，再由渲染引擎来渲染，这样就大大的提高了效率。