上一篇文章我們研究了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物件，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方法了； - 等待垃圾回收器回收。
