最近一直在用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原理後再來分享哈