Flutter系列五：State的生命周期

上一篇文章我们研究了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对象：

StatefulElement createElement() => StatefulElement(this);

接下来我们看StatefulElement(this)的逻辑：

StatefulElement(StatefulWidget widget)
      : state = widget.createState(),
        super(widget) {
    state._element = this;
    state._widget = widget;
}

final State state;

1. 调用了widget.createState()方法生成了一个State对象，StatefulElement对象持有了这个state；
2. state又持有了StatefulElement对象，也就是说它们存在循环引用关系。
3. state也持有了StatefulWidget对象。

三者的引用逻辑有点绕，用一个图表示如下：

reference

我们看到StatefulElement不需要直接引用StatefulWidget，因为它持有了State,从而间接持有了StatefulWidget。

StatelessElement需要直接持有StatelessWidget。

mounted

bool get mounted => _element != null;

当_element被赋值后，mounted就变为true了。

initState

接上面的inflateWidget方法，新创建的element对象会调用mount方法。

由于StatefulElement没有重写mount方法，实际调用的是父类ComponentElement的mount方法。

void mount(Element? parent, dynamic newSlot) {
    super.mount(parent, newSlot);
    _firstBuild();
}

StatefulElement的_firstBuild方法中调用了state.initState()

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方法。

void performRebuild() {
    if (_didChangeDependencies) {
      state.didChangeDependencies();
      _didChangeDependencies = false;
    }
    super.performRebuild();
}

InheritedWidget的值变化后，有可能会将_didChangeDependencies的值变为true。

build

我们看看super.performRebuild()方法:

void performRebuild() {
    Widget? built;
    try {
      built = build();
    }finally {

    }
    _child = updateChild(_child, built, slot);
}


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将会被垃圾回收器回收。

总结

1. 在StatefulWidget实例化StatefulElement对象的时候会调用widget.createState()创建State对象，然后State和StatefulElement相互引用；
2. State具有对StatefulElement的引用后，mounted就变为true, 此时就可以调用setState方法了；
3. StatefulElement对象然后调用mount方法挂载到Element Tree上去。挂载后时会调用initState和didChangeDependencies方法；
4. 然后element会调用performRebuild方法，此时会调用State的build方法，如果InheritedWidget的值变化也会调用didChangeDependencies方法；
5. 父Widget引起重构Build的时候，如果element能够复用就会调用State的didUpdateWidget方法；
6. 当element从active变为inactive的时候会调用state的deactivate方法；
7. 当element从inactive变为defunct的时候，会调用state的dispose方法，并将_element置为null, 此时就不能再调用setState方法了；
8. 等待垃圾回收器回收。

state lifecycle