第一次看文章的朋友可以關(guān)注我，會(huì)不定期發(fā)布大廠面試題、Android架構(gòu)技術(shù)知識(shí)點(diǎn)及解析等內(nèi)容，還有Android學(xué)習(xí)PDF+源碼筆記+面試文檔+進(jìn)階視頻分享

前言

最近一直在用flutter做app，感覺就像用vue或react寫web頁面一樣，蠻好玩的。為了加深自己對(duì)Flutter的理解，記錄一下自己的學(xué)習(xí)心得。

新豐ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

Widget、StatefulWidget、StatelessWidget

看源碼就知道這三者的關(guān)系了，代碼如下：

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沒有狀態(tài)，可以類比react中的傻瓜組件；

StatefulWidget有狀態(tài)，狀態(tài)存在State對(duì)象中；所以一般說的生命周期都是指的是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) { }
}

現(xiàn)象

為了驗(yàn)證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，相當(dāng)于page1被暫時(shí)移出

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

從page2->page1，相當(dāng)于page1又被移回來了

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

從page1->Home，相當(dāng)于page1被刪除

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

生命周期的總結(jié)

直接看圖，應(yīng)該很清晰了，

image

上述的生命周期，有兩個(gè)地方需要重點(diǎn)理解：

1. state對(duì)象的依賴發(fā)生變化時(shí)，這是當(dāng)state中通過InheritedWidget使用了父級(jí)widget的共享數(shù)據(jù)，當(dāng)數(shù)據(jù)變化的時(shí)候，就會(huì)調(diào)用子widget的didChangeDependencies()

2. widget重新構(gòu)建時(shí)，會(huì)調(diào)用state的didUpdateWidget()；首先要知道，每個(gè)StatefulWidget都有一個(gè)state對(duì)應(yīng)； 當(dāng)widget重新構(gòu)建的時(shí)候，會(huì)先調(diào)用widget的canUpdate方法來判斷是否需要更新；如果 key與runtimeType都一樣的，會(huì)返回true，表示可以對(duì)widget進(jìn)行更新，從而調(diào)用state的didUpdateWidget()；如果 key或runtimeType不一樣的時(shí)候，那就沒必要更新，直接刪除舊的，創(chuàng)建個(gè)新的就可以了。

疑問

在嘗試的時(shí)候，有個(gè)現(xiàn)象，當(dāng)widget頁面在可見到不可見之間切換的時(shí)候，調(diào)用的方法都是一樣的，都是deativate->didChangeDependencies->build；這里有個(gè)疑問，既然都已經(jīng)不可見了為啥還要build？或者說都build了為啥還能不可見？

這個(gè)疑問應(yīng)該需要進(jìn)一步挖掘Flutter的widget、element、render樹的關(guān)系，等進(jìn)一步理解了Flutter UI原理后再來分享哈

最后

現(xiàn)在，很多公司的項(xiàng)目已經(jīng)上flutter，還有些公司在上flutter的路上

學(xué)習(xí)要先人一步，關(guān)注我和我的專欄

點(diǎn)擊 Flutter從入門到進(jìn)階實(shí)戰(zhàn)領(lǐng)取flutter學(xué)習(xí)視頻

更多Android學(xué)習(xí)內(nèi)容還可以看我的GitHub鏈接： https://github.com/Meng997998/AndroidJX，看完順便點(diǎn)亮一下星星哦