Flutter中的StatefulWidget及其生命周期

1.StatefulWidget是什么？

状态可变的widget。

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
 
  @override
  StatefulElement createElement() => StatefulElement(this);

  @protected
  State createState();
}

通过其类的定义能够看到StatefulWidget配置StatefulElement。

2. State是什么？

• state简介

State是StatefulWidget的内部逻辑与状态，由StatefulWidget的createState创建。

• state意义

StatefulWidget实例本身是不可变的， 但是StatefulWidget将其可变的状态，存储在与之关联的State对象中。

不管什么时候，只要在树中mount一个新的StatefulElement，必然需要注入一个StatefulWidget，注入一个StatefulWidget时，framework都会调用一次createState方法。

其实，在StatefulElement构造的时候，就会调用createState，创建_state对象，（_state是StatefulElement的变量）并且在StatefulElement的初始化方法中为_state关联当前的StatefulElement和用以配置StatefulElement的StatefulWidget。

StatefulElement初始化方法如下：

 /// Creates an element that uses the given widget as its configuration
 StatefulElement(StatefulWidget widget)
      : _state = widget.createState(),
 super(widget) {
...
 _state._element = this;
 _state._widget = widget;
....
}

这意味着如果StatefulWidget被插入到树中的多个位置，则会有多个State对象分别与它们关联。

state创建时机

• state类的定义

关于此类的定义如下：

abstract class State<T extends StatefulWidget> with Diagnosticable {
 
  T get widget => _widget;
  T _widget;

  ...

  BuildContext get context => _element;
  StatefulElement _element;


  bool get mounted => _element != null;

  @protected
  @mustCallSuper
  void initState() {
    assert(_debugLifecycleState == _StateLifecycle.created);
  }


  @mustCallSuper
  @protected
  void didUpdateWidget(covariant T oldWidget) { }

  @protected
  @mustCallSuper
  void reassemble() { }

  @protected
  void setState(VoidCallback fn) {
    ....
    final dynamic result = fn() as dynamic;
    ....
    _element.markNeedsBuild();
  }
  @protected
  @mustCallSuper
  void deactivate() { }
  @protected
  @mustCallSuper
  void dispose() {
  }

  @protected
  Widget build(BuildContext context);

  @protected
  @mustCallSuper
  void didChangeDependencies() { }
  ...
}

3.State类中方法概述

• initState

描述： 重写此方法以执行初始化。
场景：如果State的build方法依赖于本身可以改变状态的对象时。（例如ChangeNotifier或Stream，或者可以订阅并接收通知的其他对象）正确的方式是：

1. 在initState中订阅此对象。
2. 当element的widget发生需要更新的情况：Widget.canUpdate，在didUpdateWidget中从旧的widget中unsubscribe并且对新的widget执行subscribe。
3. 在dispose中unsubscribe。

注意点：此方法中不能使用BuildContext.dependOnInheritedWidgetOfExactType。但是此方法被调用后会立即调用didChangeDependencies，在didChangeDependencies可以使用BuildContext.dependOnInheritedWidgetOfExactType。

调用时机：StatefulElement，首次插入树中时会调用此方法，在build方法调用之前调用。

• build

描述： StatefulElement通过此方法返回的widget并通过调用updateChild来更新自己。
调用时机： framework调用此方法的几个不同的场景如下：

1. 调用initState后；
2. 调用didUpdateWidget后；
3. setState调用后；
4. State对象的依赖（dependency）改变；比如：之前build时引用的InheritedWidget更改。
5. 调用了deactivate后，然后将State对象重新插入树中的另一个位置。

• didUpdateWidget

描述： StatefulElement存在，并且符合Widget.canUpdate的情况下对StatefulWidget进行更新。

调用时机： 不论何时只要StatefulElement的配置widget改变的时候就会调用。

注意：didUpdateWidget方法最终会调用build方法，因此在此方法中调用setState是多余的。如果重写此方法，请确保调用super.didUpdateWidget(oldWidget)。

• didChangeDependencies

调用时机： 当此State对象的依赖项（InheritedWidget）更改时调用。

• reassemble

描述： 用于开发阶段hot reload。

调用时机：hot reload时调用，调用后build方法也将被调用。无需在此方法中做任何操作。

• deactivate

调用时机： 当StatefulElement从树中移除的时候会调用。

• dispose

调用时机：当StatefulElement从树中unmount的时候会调用。

4.总结

StatefulWidget用以配置StatefulElement，但在这两者之间的State承接了StatefulElement的生命周期，而StatefulWidget仅仅只是连接了State与StatefulElement的不可变的实例，因此StatefulWidget的生命周期，依赖于StatefulElement，而State却是其最简单直接的体现形式。

为了能更好的理解StatefulWidget的生命周期，我画了一张关于State、StatefulElement、Component、Element的关系图。

`State`、`StatefulElement`、`Component`、`Element`的关系图.png