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）传递出去