上一篇文章我们研究了StatelessWidget和StatefulWidget的区别，即StatefulWidget持有State能进行self Build。本篇文章我们来研究下State的生命周期。
createState
在Flutter的启动流程分析这篇文章我们分析过，Widget对应的Element插入Element Tree这一个过程是在inflateWidget方法中实现的：
Element inflateWidget(Widget newWidget, dynamic newSlot) {
final Key? key = newWidget.key;
final Element newChild = newWidget.createElement();
newChild.mount(this, newSlot);
return newChild;
}
createElement()是创建的一个StatefulElement对象：
<!-- StatefulWidget -->
StatefulElement createElement() => StatefulElement(this);
接下来我们看StatefulElement(this)的逻辑：
<!-- StatefulElement -->
StatefulElement(StatefulWidget widget)
: state = widget.createState(),
super(widget) {
state._element = this;
state._widget = widget;
}
final State<StatefulWidget> state;
- 调用了
widget.createState()方法生成了一个State<StatefulWidget>对象，StatefulElement对象持有了这个state； - state又持有了StatefulElement对象，也就是说它们存在循环引用关系。
- state也持有了StatefulWidget对象。
三者的引用逻辑有点绕，用一个图表示如下：
我们看到StatefulElement不需要直接引用StatefulWidget，因为它持有了State,从而间接持有了StatefulWidget。
StatelessElement需要直接持有StatelessWidget。
mounted
<!-- State -->
bool get mounted => _element != null;
当_element被赋值后，mounted就变为true了。
initState
接上面的inflateWidget方法，新创建的element对象会调用mount方法。
由于StatefulElement没有重写mount方法，实际调用的是父类ComponentElement的mount方法。
<!-- ComponentElement -->
void mount(Element? parent, dynamic newSlot) {
super.mount(parent, newSlot);
_firstBuild();
}
StatefulElement的_firstBuild方法中调用了state.initState()
<!-- StatefulElement -->
void _firstBuild() {
try {
// 1
final dynamic debugCheckForReturnedFuture = state.initState() as dynamic;
} finally {
}
state.didChangeDependencies();
super._firstBuild();
}
didChangeDependencies
从上面的代码，我们可以看到在_firstBuild中调用了didChangeDependencies方法，也就是说initState和didChangeDependencies这两个方法在_firstBuild中是一起执行的。
我们看到performRebuild的时候，StatefulElement的_didChangeDependencies变为true后，state也会调用didChangeDependencies方法。
<!-- StatefulElement -->
void performRebuild() {
if (_didChangeDependencies) {
state.didChangeDependencies();
_didChangeDependencies = false;
}
super.performRebuild();
}
InheritedWidget的值变化后，有可能会将_didChangeDependencies的值变为true。
build
我们看看super.performRebuild()方法:
<!-- ComponentElement -->
void performRebuild() {
Widget? built;
try {
built = build();
}finally {
}
_child = updateChild(_child, built, slot);
}
<!-- StatefulElement -->
Widget build() => state.build(this);
StatefulElement的performRebuild方法中调用了build方法，也就是state调用了build方法。
didUpdateWidget
void update(StatefulWidget newWidget) {
super.update(newWidget);
final StatefulWidget oldWidget = state._widget!;
_dirty = true;
state._widget = widget as StatefulWidget;
try {
final dynamic debugCheckForReturnedFuture = state.didUpdateWidget(oldWidget) as dynamic;
} finally {
}
rebuild();
}
element调用update时候，state会调用didUpdateWidget方法。
在父Widget引起重构Build的时候，如果element能够复用就会调用update方法。
setState
这个方法是开发者调用的，只要是mounted为true，就能够进行Self rebuild。
deactivate
当element从active变为inactive的时候会调用state的deactivate方法。
void deactivate() {
state.deactivate();
super.deactivate();
}
此时，element从Element tree中移除了，但是若果能被复用有可能会重新加到Element tree中。
dispose
当element从inactive变为defunct的时候，会调用state的dispose方法。
void unmount() {
super.unmount();
state.dispose();
state._element = null;
}
mounted == false
由于执行了state._element = null;，所以这时候mounted就变为了false。state将会被垃圾回收器回收。
总结
- 在StatefulWidget实例化StatefulElement对象的时候会调用
widget.createState()创建State对象，然后State和StatefulElement相互引用； -
State具有对StatefulElement的引用后，mounted就变为true, 此时就可以调用
setState方法了； -
StatefulElement对象然后调用
mount方法挂载到Element Tree上去。挂载后时会调用initState和didChangeDependencies方法； - 然后element会调用
performRebuild方法，此时会调用State的build方法，如果InheritedWidget的值变化也会调用didChangeDependencies方法； -
父Widget引起重构Build的时候，如果element能够复用就会调用State的
didUpdateWidget方法； - 当element从active变为inactive的时候会调用state的
deactivate方法； - 当element从inactive变为defunct的时候，会调用state的
dispose方法，并将_element置为null, 此时就不能再调用setState方法了； - 等待垃圾回收器回收。
