Flutter widget的生命週期

堯九之陽發表於2019-12-21

最近一直在用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複製程式碼

生命週期的總結

直接看圖,應該很清晰了,

Flutter widget的生命週期

上述的生命週期,有兩個地方需要重點理解:

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原理後再來分享哈

參考

1. widget簡介

2. Flutter widget生命週期


相關文章