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，或者可以订阅并接收通知的其他对象）正确的方式是：
- 在
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的时候会调用。
4.总结
StatefulWidget用以配置StatefulElement，但在这两者之间的State承接了StatefulElement的生命周期，而StatefulWidget仅仅只是连接了State与StatefulElement的不可变的实例，因此StatefulWidget的生命周期，依赖于StatefulElement，而State却是其最简单直接的体现形式。
为了能更好的理解StatefulWidget的生命周期，我画了一张关于State、StatefulElement、Component、Element的关系图。
`State`、`StatefulElement`、`Component`、`Element`的关系图.png
