用Flutter作APP学习心得：Flutter widget的生命周期

第一次看文章的朋友能够关注我和，会不按期发布大厂面试题、Android架构技术知识点及解析等内容，还有Android学习PDF+源码笔记+面试文档+进阶视频分享。

更多还能够看个人GitHub连接：https://github.com/Meng997998/AndroidJX
看完顺便点亮一下星星哦

前言

最近一直在用flutter作app，感受就像用vue或react写web页面同样，蛮好玩的。为了加深本身对Flutter的理解，记录一下本身的学习心得。

Widget、StatefulWidget、StatelessWidget

看源码就知道这三者的关系了，代码以下：

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  final Key key;
  @protected
  Element createElement();
  static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }  
}
abstract class StatelessWidget extends Widget {
  const StatelessWidget({ Key key }) : super(key: key);
  @override
  StatelessElement createElement() => StatelessElement(this);
  @protected
  Widget build(BuildContext context);  
}abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
  @override
  createElement() => StatefulElement(this);
  @protected
  State createState();
}

StatelessWidget没有状态，能够类比react中的傻瓜组件；

StatefulWidget有状态，状态存在State对象中；因此通常说的生命周期都是指的是State的生命周期；

abstract class State extends Diagnosticable {
  void initState() { }
  void didChangeDependencies() { }
  Widget build(BuildContext context);
  void setState(VoidCallback fn) {}
  void deactivate() { }
  void dispose() { }
  void reassemble() { }
  void didUpdateWidget(covariant T oldWidget) { }
}

现象

为了验证State的生命周期，个人操做是从Home->page1->page2->page1->Home

从Home->page1，这是初始化的过程

I/flutter ( 4980): [debug],[lifeCycle], initState
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

从page1->page2，至关于page1被暂时移出

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

从page2->page1，至关于page1又被移回来了

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

从page1->Home，至关于page1被删除

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], dispose

生命周期的总结

直接看图，应该很清晰了，

上述的生命周期，有两个地方须要重点理解：

1. state对象的依赖发生变化时，这是当state中经过InheritedWidget使用了父级widget的共享数据，当数据变化的时候，就会调用子widget的didChangeDependencies()

2. widget从新构建时，会调用state的didUpdateWidget()；首先要知道，每一个StatefulWidget都有一个state对应； 当widget从新构建的时候，会先调用widget的canUpdate方法来判断是否须要更新；若是 key与runtimeType都同样的，会返回true，表示能够对widget进行更新，从而调用state的didUpdateWidget()；若是 key或runtimeType不同的时候，那就不必更新，直接删除旧的，建立个新的就能够了。

疑问

在尝试的时候，有个现象，当widget页面在可见到不可见之间切换的时候，调用的方法都是同样的，都是deativate->didChangeDependencies->build；这里有个疑问，既然都已经不可见了为啥还要build？或者说都build了为啥还能不可见？

这个疑问应该须要进一步挖掘Flutter的widget、element、render树的关系，等进一步理解了Flutter UI原理后再来分享哈

最后

如今，不少公司的项目已经上flutter，还有些公司在上flutter的路上

学习要先人一步，关注我

私信我【flutter】领取flutter学习视频

更多Android学习内容还能够看个人GitHub连接：https://github.com/Meng997998/AndroidJX，看完顺便点亮一下星星哦