1.生命周期的基本概念

什么是生命周期？

• 说白了就是回调函数

• 让你知道我封装好的这个Widget它处于什么样的状态了

生命周期有啥作用？

1. 初始化数据

• 创建变量、常量

• 发送网络请求

2. 监听小部件的事件

3. 管理内存

• 销毁数据、销毁监听者

• 销毁Timer等等

2.Widget的生命周期

StatelessWidget

1、构造方法

2、build方法

StatefulWidget

• Widget构造方法

• Widget的createState

• State构造方法

• State的initState

• didChangeDependencies方法（改变依赖关系）

  1. 依赖（共享数据）的InheritedWidget发生变化之后，didChangeDependencies才会调用。

• State的Build

  1.当调用setState方法。会重新调用Build进行渲染。

  2.setState方法内部主要是利用_element（本质是就是context对象） 调用 markNeedsBuild

• 当Widget销毁的时候调用State的dispose

例子验证：

class MyHomePage extends StatelessWidget {
  final String? title;
  MyHomePage({Key? key, this.title}) : super(key: key) {
    print('构造方法调用了！');
  }

  @override
  Widget build(BuildContext context) {
    print('Build方法调用了！');
    return Center(
      child: Text(title ?? ''),
    );
  }
}

并用ASCode 来编译运行：

可以看到先运行 1。MyHomePage（） 2.Widget build(BuildContext context)

修改代码（使用StatefulWidget）：

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key) {
    print('Widget构造方法来了！');
  }

  @override
  State createState() {
    print('creatState来了！');
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    print('State的build来了');
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            _count++;
            setState(() {});
            // (context as StatefulElement).markNeedsBuild();
          },
          child: const Icon(Icons.add),
        ),
        Text('$_count')
      ],
    );
  }

  _MyHomePageState() {
    print('State构造方法来了！');
  }

  @override
  void initState() {
    print('State的init来了');
    super.initState();
  }

  @override
  void dispose() {
    print('State的dispose来了！');
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    print('didChangeDependencies来了！');
    super.didChangeDependencies();
  }
}

运行打印结果：

flutter的运行顺序是:

1. StatefulWidget:构造方法。
2. createState：创建WidgetState。
3. _MyHomePageState()：PageState构造方法。
4. initState(): PageState的init方法。
5. didChangeDependencies():didChangeDependencies方法。
6. Widget build（）：State的build方法。
7. dispose():PageState销毁时调用。

通过r命令热更时：

只调用widget构造方法和 state build方法。

我们点击ElevatedButton： 我们发现点击一次ElevatedButton就会调用一次：state build方法

setState(() {});底层framwwork.dart调用的就是(context as StatefulElement).markNeedsBuild();

3.Flutter渲染原理

在Flutter渲染的流程中。有三棵树：Flutter引擎渲染是针对Render树中的对象进行渲染

Widget树、Element树、Render树

每一个Widget创建出来都会创建一个Element对象

• 调用createElement方法。Element加入Element树中，都会调用mount方法

• RanderElement 主要是创建RenderObject

  1. 通过mount方法创建RenderObject对象。

• StatefulElement 继承 ComponentElement

  1. 调用creatState方法，创建state

  2. 将Widget赋值给State对象

  3. 调用state的build方法，并且将自己（Element）传出去

• StatelessElement 继承 ComponentElement

  1. 主要调用build方法，并且将自己（Element）传递出去