四、编程范式、Widget的生命周期

一、编程范式

在了解StatelessWidget和StatefulWidget之前，我们需要先了解Flutter如何调整一个部件(Widget)，即UI编程范式

在Android和iOS中，UI的开发时命令式编程，而在Flutter中，UI开发时声明式编程，其核心设计思想是将视图和数据分离开，与React一样。我们需要转变一下编程思维：

命令式编程强调控制过程细节
生命是强调通过意图输出结果整体。

iOS中的SwiftUI中以及Flutter目前都采用了声明式编程。
Flutter中，对组件分为StatelessWidget和StatefulWidget两大类，当所要构建的用户界面不随任何状态信息的变化而变化时，使用StatelessWidget,反之则使用StatefulWidget。

1、StatefulWidget是“万金油”吗？

StatefulWidget不仅可以展示静态UI还可以响应状态变化，那StatelessWidget还有存在的必要吗?

事实是，StatefulWidget的滥用会直接影响Flutter应用渲染的性能，与其生命周期有很大的关系。

Widget 是不可变的，更新则意味着销毁 + 重建（build）。StatelessWidget 是静态的，一旦创建则无需更新；而对于 StatefulWidget 来说，在 State 类中调用 setState 方法更新数据，会触发视图的销毁和重建，也将间接地触发其每个子 Widget 的销毁和重建。

这意味着什么呢？如果我们的根布局是一个StatefulWidget，在其state中每调用一次更新UI，都将是一整个页面所有Widget的销毁和重建。

二、Flutter的Widget生命周期

2.1 生命周期的理解

什么是生命周期呢？

客户端开发：iOS开发中UIViewController从创建到销毁的整个过程，Android开发中Activity从创建到销毁的整个过程。以便在不同的生命周期方法中完成不同的操作；
前端开发中：Vue、React开发中组件也都有自己的生命周期；

Flutter小部件的生命周期：

StatelessWidget可以由父Widget直接传入值，调用build方法来构建，整个过程非常简单；
而StatefulWidget需要通过State来管理其数据，并且还要监控状态的改变决定是否重新build整个Widget；
所以，我们主要讨论StatefulWidget的生命周期，也就是它从创建到销毁的整个过程；

2.2 StatefulWidget生命周期

2.2.1 生命周期的简单版

StatefulWidget本身由两个类组成的：StatefulWidget和State

StatefulWidget生命周期

首先，执行StatefulWidget中相关的方法：

1、执行StatefulWidget的构造函数（Constructor）来创建出StatefulWidget；
2、执行StatefulWidget的createState方法，来创建一个维护StatefulWidget的State对象；

其次，调用createState创建State对象时，执行State类的相关方法，分为3个阶段：

State的生命周期

第一阶段：创建

1、执行State类的构造方法（Constructor）来创建State对象；
2、执行initState，我们通常会在这个方法中执行一些数据初始化的操作，或者也可能会发送网络请求；

注意：

initState方法是重写父类的方法，必须调用super，父类中会进行一些其他操作；

在源码中，initState有注解（annotation）：@mustCallSuper

3、执行didChangeDependencies方法，这个方法在两种情况下会调用：

1、调用initState会调用； 2、从其他对象中依赖一些数据发生改变时，比如InheritedWidget；

4、执行build方法，构建视图；

第二阶段：更新

build方法执行有3种情况，

1、didChangeDependencies方法

2、手动调用setState方法

3、didUpdateWidget方法（父Widget触发重建（rebuild）时，系统会调用didUpdateWidget方法）

第二阶段：销毁

当组件的可见状态发生变化时，deactivate函数会被调用，这时 State 会被暂时从视图树中移除。
当前的Widget不再使用时，会调用dispose进行销毁；

2.2.2 案例一计数器 - StatefulWidget的实践

计数器

import 'package:flutter/material.dart';

main() => runApp(ZQLunchApp());

class ZQLunchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: ZQHomePage()
    );
  }
}

class ZQHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('计数器'),
        backgroundColor: Colors.brown,
      ),
      body: ZQHomeContent(),
    );
  }
}

class ZQHomeContent extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _ZQHomeContentState();
  }
}

class _ZQHomeContentState extends State<ZQHomeContent>{
  var _clickCount = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _getButtons(),
          SizedBox(
            height: 10,
          ),
          Text(
            '当前计数：$_clickCount',
            style: TextStyle(
              fontSize: 22,
              color: Colors.blue,
            ),
          )
        ],
      ),
    );
  }

  Widget _getButtons(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RaisedButton(
            color: Colors.red,
            child: Text(
              "+",
              style: TextStyle(
                fontSize: 20,
                color: Colors.white
              ),
            ),
            onPressed: (){
              setState(() {
              _clickCount++;
            });
        }),
        SizedBox(width: 10,),
        RaisedButton(
            color: Colors.green,
            child: Text(
              "-",
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.white
              ),
            ),
            onPressed: (){
              setState(() {
                _clickCount--;
              });
            })
      ],
    );
  }
}

2.2.3 案例二 StatefulWidget的声明周期

import 'package:flutter/material.dart';

main() => runApp(ZQLunchApp());

class ZQLunchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: ZQHomePage()
    );
  }
}

class ZQHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('计数器'),
        backgroundColor: Colors.brown,
      ),
      body: ZQHomeContent(),
    );
  }
}

class ZQHomeContent extends StatefulWidget {
  ZQHomeContent(){
    print('第一步，调用ZQHomeContent 的 constructor 方法');
  }

  @override
  _ZQHomeContentState createState() {
    print('第二步，调用ZQHomeContent 的 createState 方法');
    return _ZQHomeContentState();
  }
}

class _ZQHomeContentState extends State<ZQHomeContent>{
  int _counter = 0;
  _ZQHomeContentState(){
    print('第三步，调用ZQHomeContent 的 constructor 方法');
  }

  @override
  void initState() {
    print("第四步，_ZQHomeContentState 的 initState 方法");
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print("第五步，_ZQHomeContentState 的 build 方法");
    return Column(
      children: [
        RaisedButton(
            child: Icon(Icons.add),
            onPressed: (){
              setState(() {
                _counter++;
              });
            }),
        Text("数字$_counter"),
      ],
    );
  }

  @override
  void dispose() {
    print("第六步，_ZQHomeContentState 的 build 方法");//暂时不会走
    super.dispose();
  }
}

2.2.3 生命周期的进阶版

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

很多资料没有提到这个属性，该属性是内部设置的，不需要手动修改；

dirty state的含义是脏的State

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

clean state的含义是干净的State

表示当前build出来的Widget，下一次重绘检查时不需要重新build；