Flutter的一生

说明：
本篇文章已授权微信公众号 Flutter那些事独家发布，未经授权，严禁转载！

1. 前言
在初学新技术之前，我们总会要从最基本的东西了解起来，就好比当接触Android的时候，我们学四大组件都要学好久，是否还记得在Android的生命周期？首先让我们回顾下Android中的生命周期

Android生命周期
关于这个就不在多说了，常用场景总结下:

1.启动Activity：系统会先调用onCreate方法，然后调用onStart方法，最后调用onResume，Activity进入运行状态。2.当前Activity被其他Activity覆盖其上或被锁屏：系统会调用onPause方法，暂停当前Activity的执行。3.当前Activity由被覆盖状态回到前台或解锁屏：系统会调用onResume方法，再次进入运行状态。4.当前Activity转到新的Activity界面或按Home键回到主屏，自身退居后台：系统会先调用onPause方法，然后调用onStop方法，进入停滞状态。5.用户后退回到此Activity：系统会先调用onRestart方法，然后调用onStart方法，最后调用onResume方法，再次进入运行状态。6.当前Activity处于被覆盖状态或者后台不可见状态，即第2步和第4步，系统内存不足，杀死当前Activity，而后用户退回当前Activity：再次调用onCreate方法、onStart方法、onResume方法，进入运行状态。7.用户退出当前Activity：系统先调用onPause方法，然后调用onStop方法，最后调用onDestory方法，结束当前Activity。

emmm，相信小伙伴们现在应该记忆起来了吧,前戏好了，进入主题，聊聊我们今天的主人公"State"。

2. Widget概念
在我们的主人公出场前，先认识下他的小伙伴

Flutter中几乎所有的对象都是一个Widget，与原生开发中“控件”不同的是，Flutter中的widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector widget、用于应用主题数据传递的Theme等等。而原生开发中的控件通常只是指UI元素

3. State的引入

StatelessWidget(用于不需要维护状态的场景)

abstract class StatelessWidget extends Widget

StatefulWidget(用于需要维护状态的场景)

abstract class StatefulWidget extends Widget

从上述的代码中我们看到他们都继承了一个东西Widget,那就先简单的看下这个类

@immutableabstract class Widget extends DiagnosticableTree {  const Widget({ this.key });  final Key key;  @protected  Element createElement();  @override  String toStringShort() {    return key == null ? '$runtimeType' : '$runtimeType-$key';  }  @override  void debugFillProperties(DiagnosticPropertiesBuilder properties) {    super.debugFillProperties(properties);    properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;  }  static bool canUpdate(Widget oldWidget, Widget newWidget) {    return oldWidget.runtimeType == newWidget.runtimeType        && oldWidget.key == newWidget.key;  }}

上述代码中有一个我们很常见的方法,每次在继承的时候都需要重写的一个方法

  @override  StatefulElement createElement() => StatefulElement(this);

继续跟踪StatefulElement发现存在一个widget.createState()方法，发现了就要继续，宁杀错，莫放过

class StatefulElement extends ComponentElement {  /// Creates an element that uses the given widget as its configuration.  StatefulElement(StatefulWidget widget)      : _state = widget.createState(),        super(widget) {   .....    assert(_state._element == null);    _state._element = this;    assert(_state._widget == null);    _state._widget = widget;    assert(_state._debugLifecycleState == _StateLifecycle.created);  }

点击createState方法我们终于找到了今天的主人公,没错，就是它，State，跑不掉了。

  @protected  State createState();

生命周期
到了现在这一步，我们已经找到想要的了，正如前面所说,Android有自己的生命周期，那么作为Flutter也有自己独特的生命周期
Flutter生命周期
嗯，我一眼就看到了initState这个方法，还记得在网络请求的时候亦或是变量的初始化，总是要写到这个方法里面

  @override void initState() {   // TODO: implement initState   super.initState();   _loadItemPage(); }

我们可以将上述方法分为三个部分进行描述，见下图：

在这里插入图片描述

大致可以看成三个阶段

[x] 初始化（插入渲染树）
~~构造函数~~

不属于生命周期，因为这个时候State的widget属性为空，此时无法在构造函数中访问widget属性

initState

 /// Called when this object is inserted into the tree.  这个函数在生命周期中只调用一次。这里可以做一些初始化工作，比如初始化State的变量

didChangeDependencies

 /// Called when a dependency of this [State] object changes. 这个函数会紧跟在initState之后调用

[x] 状态改变（在渲染树中存在）
didUpdateWidget

/// Called whenever the widget configuration changes. 当组件的状态改变的时候就会调用didUpdateWidget,比如调用了setStat

[x] 销毁（从渲染树种移除）
deactivate

/// Called when this object is removed from the tree. 在dispose之前，会调用这个函数。

dispose

/// Called when this object is removed from the tree permanently. 一旦到这个阶段，组件就要被销毁了，这个函数一般会移除监听，清理环境。

这个函数在生命周期中只调用一次。这里可以做一些初始化工作，比如初始化State的变量。

大体这样吧，最后来个图表总结下

阶段	调用次数	是否支持setState
构造函数	1	否
initState	1	支持但无效(使用setState和不使用一样)
didChangeDependencies	>=1	支持但无效
didUpdateWidget	>=1	支持但无效
deactivate	>=1	否
dispose	1	否

示例分析
可能有人会说，bb了那么久，毛都没看到一根,所以讲了这么多，不来点实际的怎么对的住之前的bb呢？来人啊，上代码

import 'package:flutter/material.dart';class LifeState extends StatefulWidget {  @override  _lifeStates createState() => _lifeStates();}class _lifeStates extends State {  @override  void initState() {    // TODO: implement initState    super.initState();    print('initState');  }  @override  void didChangeAppLifecycleState(AppLifecycleState state) {    print(state.toString());  }  @override  void didChangeDependencies() {    // TODO: implement didChangeDependencies    super.didChangeDependencies();    print('didChangeDependencies');  }  @override  void didUpdateWidget(LifeState oldWidget) {    super.didUpdateWidget(oldWidget);    print('didUpdateWidget');  }  @override  Widget build(BuildContext context) {    print('build');    // TODO: implement build    return MaterialApp(      home: Center(          child: GestureDetector(        child: new Text('lifeCycle'),        onTap: () {          Navigator.of(context)              .push(new MaterialPageRoute(builder: (BuildContext c) {            return new Text('sdfs');          }));        },      )),    );  }  @override  void reassemble() {    // TODO: implement reassemble    super.reassemble();    print('reassemble');  }  @override  void deactivate() {    // TODO: implement deactivate    super.deactivate();    print('deactivate');  }  @override  void dispose() {    // TODO: implement dispose    super.dispose();    print('dispose');  }}

测试结果

创建widget

initStatedidChangeDependenciesbuild

退出页面

deactivatedispose

点击热加载按钮

reassembledidUpdateWidgetbuild

app从显示到后台(home键)

AppLifecycleState.inactiveAppLifecycleState.paused

app从后台回到前台

AppLifecycleState.inactiveAppLifecycleState.resumed

更多相关文章

随机推荐