Flutter中的StatefulWidget及其生命周期

级别： ★☆☆☆☆
标签：「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 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，或者可以订阅并接收通知的其他对象）正确的方式是：

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的时候会调用。

总结

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

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

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

Flutter中的RenderObjectElement与RenderObjectWidget

Flutter中的StatelessWidget及其生命周期
Flutter中的Widget
Flutter中的Element（下篇）
Flutter中的Element（上篇）
iOS 解决 [NSURL fileURLWithPath:] 对 # 的编码问题
Xcode 调整导航目录字体大小b
Swift 5.1 (21) - 泛型
Swift 5.1 (20) - 协议
Swift 5.1 (19) - 扩展
浅谈编译过程