Flutter中的StatefulWidget及其生命周期专注Flutter相关技术及工具Flutter经验之谈

级别： ★☆☆☆☆

标签：「Flutter」「StatefulWidget 」「生命周期」
作者：沐灵洛
审校： QiShare团队

`StatefulWidget`是什么？

状态可变的widget。

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

  @protected
  State createState();
}
复制代码

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

关于`State`

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

StatefulWidget实例本身是不可变的，在StatefulWidget中它可变的状态存储在与之关联的State对象中，不管什么时候，只要在树中mount一个新的StatefulElement（必然需要注入一个StatefulWidget）或注入一个StatefulWidget时，framework都会调用一次createState方法。（其实呀，在StatefulElement构造的时候，就会调用createState，创建_state对象）。

这意味着如果StatefulWidget被插入到树中的多个位置，则会有多个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() { }
  ...
}
复制代码

方法概述

initState

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

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

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

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

build

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

调用initState后；
调用didUpdateWidget后；
setState调用后；
State对象的依赖（dependency ）改变；比如：之前build时引用的InheritedWidget更改。
调用了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的时候会调用。

总结

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

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