[Flutter] 10-Flutter的生命周期

本章介绍 Flutter 的组件，以及组件的生命周期。

一、组件 Widget定义

Flutter 中的组件与前端组件的理解和作用基本一致，但是没有一个明确的概念解释 Flutter 组件，这里借用前端的组件定义来解释 Flutter 组件的概念。

一个 Flutter 组件，包含了组件的模板、样式和交互等内容，外部只要按照组件设定的属性、函数及事件处理等进行调用即可，完全不用考虑组件的内部实现逻辑。其中组件又包括无状态组件和有状态组件。

  • 无状态组件

无状态组件，可以理解为将外部传入的数据转化为界面展示的内容，只会渲染一次。

  • 有状态组件

有状态组件，是定义交互逻辑和业务数据，可以理解为具有动态可交互的内容界面，会根据数据的变化进行多次渲染。

二、生命周期

在原生 Android 、原生 iOS 、前端 React 或者 Vue 都存在生命周期的概念，在 Flutter 中一样存在生命周期的概念，其基本概念和作用相似。 Flutter 中说的生命周期，也是指有状态组件，对于无状态组件生命周期只有 build 这个过程，也只会渲染一次，而有状态组件则比较复杂，下面我们就来看看有状态组件的生命周期过程。

1)、生命周期的流转

Flutter 中的生命周期，包含以下几个阶段：

  • createState ，该函数为 StatefulWidget 中创建 State 的方法，当 StatefulWidget 被调用时会立即执行 createState 。

  • initState ，该函数为 State 初始化调用，因此可以在此期间执行 State 各变量的初始赋值，同时也可以在此期间与服务端交互，获取服务端数据后调用 setState 来设置 State。
    注意：这个方法是重写父类的方法，必须调用super，因为父类中会进行一些其他操作；
    并且如果你阅读源码，你会发现这里有一个注解（annotation）：@mustCallSuper

@protected
@mustCallSuper
void initState() {
    assert(_debugLifecycleState == _StateLifecycle.created);
}
  • didChangeDependencies ，该函数是在该组件依赖的 State 发生变化时，这里说的 State 为全局 State ，例如语言或者主题等，类似于前端 Redux 存储的 State 。这个方法在两种情况下会调用：
    情况一：调用initState会调用；
    情况二：从其他对象中依赖一些数据发生改变时，比如前面我们提到的InheritedWidget；

  • build ，主要是返回需要渲染的 Widget ，由于 build 会被调用多次，因此在该函数中只能做返回 Widget 相关逻辑，避免因为执行多次导致状态异常。

  • reassemble ，主要是提供开发阶段使用，在 debug 模式下，每次热重载都会调用该函数，因此在 debug 阶段可以在此期间增加一些 debug 代码，来检查代码问题。

  • didUpdateWidget ，该函数主要是在组件重新构建，比如说热重载，父组件发生 build 的情况下，子组件该方法才会被调用，其次该方法调用之后一定会再调用本组件中的 build 方法。

  • deactivate ，在组件被移除节点后会被调用，如果该组件被移除节点，然后未被插入到其他节点时，则会继续调用 dispose 永久移除。

  • dispose ，永久移除组件，并释放组件资源。

图1 生命周期流程图

整个过程分为四个阶段：

  • 1.初始化阶段，包括两个生命周期函数 createState 和 initState；

  • 2.组件创建阶段，也可以称组件出生阶段，包括 didChangeDependencies 和 build；

  • 3.触发组件多次 build ，这个阶段有可能是因为 didChangeDependencies、setState 或者 didUpdateWidget 而引发的组件重新 build ，在组件运行过程中会多次被触发，这也是优化过程中需要着重需要注意的点；

  • 4.最后是组件销毁阶段，deactivate 和 dispose。

2)、组件首次加载执行过程

我们先实现一段代码，来看下组件在首次创建的执行过程是否是按照图 1 的流程。

  • 1、 在 lib 中 pages 下创建 test_stateful_widget.dart ；
  • 2、 在 test_stateful_widget.dart 添加如下代码：
import 'package:flutter/material.dart';
/// 创建有状态测试组件
class TestStatefulWidget extends StatefulWidget {
  @override
  createState() {
    print('create state');
    return TestState();
  }
}
/// 创建状态管理类，继承状态测试组件
class TestState extends State<TestStatefulWidget> {
  /// 定义 state [count] 计算器
  int count = 1;
  /// 定义 state [name] 为当前描述字符串
  String name = 'test';
  @override
  initState() {
    print('init state');
    super.initState();
  }
  @override
  didChangeDependencies() {
    print('did change dependencies');
    super.didChangeDependencies();
  }
  @override
  didUpdateWidget(TestStatefulWidget oldWidget) {
    count++;
    print('did update widget');
    super.didUpdateWidget(oldWidget);
  }
  @override
  deactivate() {
    print('deactivate');
    super.deactivate();
  }
  @override
  dispose() {
    print('dispose');
    super.dispose();
  }
  @override
  reassemble(){
    print('reassemble');
    super.reassemble();
  }
  /// 修改 state name
  void changeName() {
    setState(() {
      print('set state');
      this.name = 'flutter';
    });
  }
  @override
  Widget build(BuildContext context) {
    print('build');
    return Column(
      children: <Widget>[
        FlatButton(
          child: Text('$name $count'), // 使用 Text 组件显示描述字符和当前计算
          onPressed:()=> this.changeName(), // 点击触发修改描述字符 state name
        )
      ],
    );
  }
}

上述代码把有状态组件的一些生命周期函数都进行了重写，并且在执行中都打印了一些字符串标识，目的是可以看到该函数被执行。

  • 3、 然后在 main.dart 中加载该组件，代码如下：
import 'package:flutter/material.dart';
import 'package:flutter_liftcycle_demo/pages/test_stateful_widget.dart';

/// APP 核心入口文件
void main() => runApp(MyApp());
/// MyApp 核心入口界面
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Lifecycle', // APP 名字
        theme: ThemeData(
          primarySwatch: Colors.blue, // APP 主题
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('首页'), // 页面名字
            ),
            body: Center(
             child:
              TestStatefulWidget(),
            )
        ));
  }
}

代码修改后，我们打开手机模拟器，然后运行该 App ，在输出控制台可以看到下面的运行打印日志信息。

flutter: create state
flutter: init state
flutter: did change dependencies
flutter: build
flutter: reassemble
flutter: did update widget
flutter: build

运行结果中，打印过程可以看到是按照我们上面图 1 的执行流程在运行的，但其中最值得关注的是 build 运行了两次。这是在开发模式下才会执行的过程，在正式环境是不会出现的，因为重新渲染成本非常大，这个问题可以使用打印 build 的调用堆栈即可发现。如果你要关闭两次 build 也可以实现，在 Flutter 框架中搜索 constants.dart 文件，并找到下面这行代码，将 defaultValue 从 false 修改为 true。

const bool kReleaseMode = bool.fromEnvironment('dart.vm.product', defaultValue: true);

其实这里会触发 didUpdateWidget 函数，是因为 TestStatefulWidget 组件是 MyApp 组件中的子组件，从而导致 MyApp 函数中的 build 触发子组件 didUpdateWidget 函数的执行，具体会在下面触发组件再次 build 中详细说明。

3)、触发组件再次 build

触发组件再次 build 有三种方式: 一个是 setState ，另一个是 didChangeDependencies ，再一个是 didUpdateWidget 。

  • setState 比较容易理解，在数据状态进行变化时，触发组件 build ，在上面的代码运行后的界面中，点击中间的text，如图 2 位置，就可以看到在调用 setState 后，会调用 build 一个方法。
图 2 测试组件运行界面
//点击中间的text
flutter: set state
flutter: build

  • didChangeDependencies ，你可以理解为本组件依赖的全局 state 的值发生了变化，例如前端的 redux 中的数据发生了变化，也会进行 build 操作。一般情况下我们会将一些比较基础的数据放到全局变量中，例如主题颜色、地区语言或者其他通用变量等。如果这些全局 state 发生状态变化则会触发该函数，而该函数之后就会触发 build 操作。

  • didUpdateWidget 触发 build 我们需要从代码层面来讲解下，现在我们需要设计两个组件，一个是我们刚实现的 TestStatefulWidget ，另外一个则是该组件的子组件，我们命名为SubStatefulWidget 。接下来我们在 TestStatefulWidget 加载该组件，在头部 import 该组件，然后将 build 中的代码修改为下面：

@override
Widget build(BuildContext context) {
  print('build');
  return Column(
    children: <Widget>[
      FlatButton(
        child: Text('$name $count'), // 使用 Text 组件显示描述字符和当前计算
        onPressed:()=> this.changeName(), // 点击触发修改描述字符 state name
      ),
      SubStatefulWidget() // 加载子组件
    ],
  );
}

接下来我们实现 SubStatefulWidget 子组件的代码，和父组件基本相似，只是在打印处都加了 sub ，其次 build 实现逻辑也修改了，具体代码如下：

import 'package:flutter/material.dart';
/// 创建子组件类
class SubStatefulWidget extends StatefulWidget {
  @override
  createState() {
    print('sub create state');
    return SubState();
  }
}
/// 创建子组件状态管理类
class SubState extends State<SubStatefulWidget> {
  String name = 'sub test';
  @override
  initState() {
    print('sub init state');
    super.initState();
  }
  @override
  didChangeDependencies() {
    print('sub did change dependencies');
    super.didChangeDependencies();
  }
  @override
  didUpdateWidget(SubStatefulWidget oldWidget) {
    print('sub did update widget');
    super.didUpdateWidget(oldWidget);
  }
  @override
  deactivate() {
    print('sub deactivate');
    super.deactivate();
  }
  @override
  dispose() {
    print('sub dispose');
    super.dispose();
  }
  @override
  reassemble(){
    print('sub reassemble');
    super.reassemble();
  }
  @override
  Widget build(BuildContext context) {
    print('sub build');
    return Text('subname $name'); // 使用Text组件显示当前name state
  }
}

代码实现完成后，我们再重新加载 App ，可以看到如下运行日志信息。

flutter: create state
flutter: init state
flutter: did change dependencies
flutter: build
flutter: sub create state
flutter: sub init state
flutter: sub did change dependencies
flutter: sub build
flutter: reassemble
flutter: sub reassemble
flutter: did update widget
flutter: build
flutter: sub did update widget
flutter: sub build

  • 加载 TestStatefulWidget 组件，四个状态函数 createState、initState、didChangeDependencies 和 build；

  • 加载 SubStatefulWidget 组件，四个状态函数 createState、initState、didChangeDependencies 和 build；

  • TestStatefulWidget 进行二次 build ，因为父组件需要重新 build 触发子组件的 didUpdateWidget ，didUpdateWidget 则触发 build。

为了验证上面逻辑，我们现在再次点击图 3 中的红色部分，来触发 TestStatefulWidget 组件的 build ，看下是否会触发子组件的 didUpdateWidget 和 build。

图 3 增加子组件界面点击指示图

在运行日志窗口可以看到增加了下面的日志信息。

flutter: set state
flutter: build
flutter: sub did update widget
flutter: sub build

这就说明了父组件的变化会引发子组件的 build ，虽然子组件没有任何的改动。这点如果是在前端的话，是需要使用 shouldUpdateComponent ，来介绍重新构建，不过在 Flutter 中是没有该功能来减少重新 build 的。

4)、组件销毁触发

在上面的代码基础上，我们直接在 TestStatefulWidget 组件中注释子组件 SubStatefulWidget 的调用，然后热重载即可看到下面的日志信息（请注意一定是需要热重载才会有效果，主要目的是一开始加载了该组件，后面再去掉该组件触发）。

flutter: reassemble
flutter: sub reassemble
flutter: did update widget
flutter: build
flutter: sub deactivate
flutter: sub dispose

5) 补充: 生命周期属性

其实生命周期中initState方法前后还有两个属性调用，如下图:

1、mounted是State内部设置的一个属性，事实上我们不了解它也可以，但是如果你想深入了解它，会对State的机制理解更加清晰；

  • 很多资料没有提到这个属性，但是我这里把它列出来，是内部设置的，不需要我们手动进行修改；
mounted属性源码

2、dirty state的含义是脏的State

  • 它实际是通过一个Element的东西的属性来标记的；
  • 将它标记为dirty会等待下一次的重绘检查，强制调用build方法来构建我们的Widget；

3、clean state的含义是干净的State

  • 它表示当前build出来的Widget，下一次重绘检查时不需要重新build；
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 197,368评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,941评论 2赞 374
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 144,369评论 0赞 326
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,848评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,719评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,505评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,904评论 3赞 388
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,528评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,819评论 1赞 293
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,848评论 2赞 314
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,652评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,468评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,912评论 3赞 300
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,095评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,389评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,906评论 2赞 343
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,120评论 2赞 339