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方法