Flutter中widget生命週期和渲染邏輯

1. 生命週期相關邏輯

1.1 什麼是生命週期

• 系統封裝好的回調方法
• 開發者知道當前widget處於什麼狀態

1.2 生命週期做用

• 監聽狀態
• 在指定的時機初始化狀態與數據
• 內存管理相關邏輯

2. widget生命週期

2.1 Stateless

• widget的構造方法
• widget的build方法

2.2 Statefull

• widget的構造方法
• widget中調用_state的構造方法
• state的init方法
• state的didChangeDependencies方法，此方法依賴InheritedWidget發生變化以後，也會調用。
• state的build方法，調用setState方法時，會調用build方法
• state的deactivate方法，在dispose方法以前調用
• 當銷燬widget的時候調用dispose方法

3. widget渲染邏輯

3.1 widget子類

widget子類有StatefulWidget、StatelessWidget和RenderObjectWidget。前兩個咱們用的比較多。而RenderObjectWidget不會直接使用，可是有幾個它的子類咱們會常常用到。

3.2 RenderObjectWidget

繼承於RenderObjectWidget的類，會加入到render tree中。Row和Colum間接的繼承於RenderObjectWidget。

咱們來看看詳細的繼承關係：

Row和Colum都是繼承Flex，而Flex繼承MultiChildRenderObjectWidget，MultiChildRenderObjectWidget繼承RenderObjectWidget。

注意：並非全部的Widget都會被獨立渲染！只有繼承RenderObjectWidget的纔會建立RenderObject對象！

3.3 Flutter中的三棵樹

Widget樹、Element樹和Render樹 經過Android Studio窗口右邊的‘Flutter Inspector’能夠看到Widget樹和Render樹，如圖：

3.4Element樹做用

在framework.dart中，查看StatelessWidget和StatefulWidget聲明文檔中，都會有一個createElement（）方法，

StatelessWidget如圖：

StatefullWidget如圖：

每個widget都會建立一個element對象，這樣作的緣由是Widget樹是不穩定的，常常會有變更，若是沒有element樹，每次有一點變更，就去從新渲染界面，這樣會很影響性能。

而element樹中的結點和widget樹的結點是一一對應的，若是widget中某個結點變更了，element也只改動相應的結點，渲染時只須要渲染變更的結點便可。

3.5 渲染邏輯

3.5.1 StatefullWidget渲染邏輯

StatefullWidget繼承與Widget，系統會隱式調用createElement方法和mount方法。

createElement方法實現只有一行代碼，調用StatefulElement構造方法，參數是this，也就是StatefullWidget。如圖：

StatefulElement繼承ComponentElement，系統自動調用mount方法在ComponentElement中有實現：

mount中會調到rebuild方法，rebuild方法是在父類實現，最後調用performRebuild方法：

用command+option+鼠標左鍵點擊performRebuild看到列表，如圖：

看到該方法在CompontElement中實現，又跳回來了：

其實就是調用rebuild方法的下面，在實現中看到調用了build方法，點擊進去，利用上面說到的組合鍵，選擇StatefulElement：

回到了StatefulElement的類定義中

_state.build(this)這個方法的調用的就是咱們寫的StatefulWidget代碼中state的build方法。而state初始化是在StatefulElement構造時初始化的，調用的就是createState()，這個方法就是咱們在寫StatefulWidget中定義的createState()方法，

參數this就是BuildContext context，也就是說context是element。經過BuildContext的定義註釋也能證實：

簡單總結一下StatefullWidget的渲染流程：

StatefullWidget會建立StatefulElement

• StatefulElement繼承CompentElement
• 調用createState方法，建立State
• 將widget賦值給State
• 調用state的build方法，而且將本身（Element）傳出去
• build裏的context就是Widget的Element

3.5.2 StatelessWidget渲染邏輯

StatelessWidget相對簡單不少：

StatelessWidget會建立StatelessElement

• StatelessElement繼承CompentElement
• 主要就是調用build方法，而且將本身（Element）傳出去

3.5.3 RenderObjectWidget渲染邏輯

經過row或者colum的父類能夠找到RenderObjectWidget，

RenderObjectWidget會建立RenderElement

• RenderElement建立RenderObject
• Flutter會調用mount方法
• 調用createRanderObject方法