用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，看完順便點亮一下星星哦