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的内部逻辑与状态。由StatefulWidgetcreateState创建。

StatefulWidget实例本身是不可变的, 在StatefulWidget中它可变的状态存储在与之关联的State对象中,不管什么时候,只要在树中mount一个新的StatefulElement(必然需要注入一个StatefulWidget)或注入一个StatefulWidget时,framework都会调用一次createState方法。(其实呀,在StatefulElement构造的时候,就会调用createState,创建_state对象)。

这意味着如果StatefulWidget被插入到树中的多个位置,则会有多个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() { }
  ...
}
复制代码

方法概述

  • initState

描述: 重写此方法以执行初始化。 **场景:**如果Statebuild方法依赖于本身可以改变状态的对象时。(例如ChangeNotifierStream,或者可以订阅并接收通知的其他对象)正确的方式是:

  1. initState中订阅此对象。
  2. elementwidget发生需要更新的情况:Widget.canUpdate,在didUpdateWidget中从旧的widgetunsubscribe 并且对新的widget执行subscribe
  3. disposeunsubscribe

**注意点:**此方法中不能使用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仅仅只是连接了StateStatefulElement的不可变的实例,因此StatefulWidget的生命周期,依赖于StatefulElement,而State却是其最简单直接的体现形式。

为了能更好的理解StatefulWidget的生命周期,我画了一张关于StateStatefulElementComponentElement的关系图。

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

关注我们的途径有:

QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

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) – 扩展
浅谈编译过程
奇舞团安卓团队——aTaller
奇舞周刊


作者:QiShare
链接:https://juejin.cn/post/6867106742568910855
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片