Flutter中的Widget根據(jù)類型不同,大體上可以分為以下幾種:
在根Widget類中有一個抽象方法createElement(),也就意味著所有的Widget子類必須實現(xiàn)此方法:
StatelessWidget :
StatelessElement createElement() => StatelessElement(this);
StateFulWidget :
StatefulElement createElement() => StatefulElement(this);
SingleChildRenderObjectWidget :
SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);
MultiChildRenderObjectWidget :
MultiChildRenderObjectElement createElement() => MultiChildRenderObjectElement(this);
從源碼中可以看到,每種Widget都會調(diào)用createElement(),返回不同的Element對象.并且會傳入當(dāng)前的Widget,而Element中會引用傳過來的Widget:
Element(Widget widget)
: assert(widget != null),
_widget = widget;
所以 Element 中會持有 widget
需要注意StatefulElement的構(gòu)造方法:
StatefulElement(StatefulWidget widget)
: _state = widget.createState(), //調(diào)用 widget 的 createState() 方法,生成 state
super(widget) {
assert(state._element == null);
state._element = this;
state._widget = widget; // 把 widget 賦值給 state 中的 widget
assert(state._debugLifecycleState == _StateLifecycle.created);
}
可以看到在StatefulElement的構(gòu)造方法中,會調(diào)用widget的createState()方法,并且會把widget賦值給state.widget,所以我們能在state中直接使用widget.
Element還有一個很關(guān)鍵的方法mount,如下:
void mount(Element? parent, Object? newSlot) {
assert(_lifecycleState == _ElementLifecycle.initial);
assert(widget != null);
assert(_parent == null);
assert(parent == null || parent._lifecycleState == _ElementLifecycle.active);
assert(slot == null);
_parent = parent;
_slot = newSlot;
_lifecycleState = _ElementLifecycle.active;
_depth = _parent != null ? _parent!.depth + 1 : 1;
if (parent != null) {
// Only assign ownership if the parent is non-null. If parent is null
// (the root node), the owner should have already been assigned.
// See RootRenderObjectElement.assignOwner().
_owner = parent.owner;
}
assert(owner != null);
final Key? key = widget.key;
if (key is GlobalKey) {
owner!._registerGlobalKey(key, this);
}
_updateInheritance();
}
Flutter框架會根據(jù)Widget創(chuàng)建對應(yīng)的Element,不同的Widget創(chuàng)建的Element類型也是不一樣的,常用的Element有以下幾種:
Element生成以后會調(diào)用Element的mount方法,將生成的Element掛載到Element樹上.這里的 createElement 和mount 都是 Flutter框架自動調(diào)用的资锰，不需要開發(fā)者手動調(diào)用敢课。因此我們平時可能沒關(guān)注這些過程阶祭。Element里面的 mount方法需要子類實現(xiàn)绷杜，我們來看看ComponentElement里的 mount方法:
void mount(Element? parent, Object? newSlot) {
super.mount(parent, newSlot);
assert(_child == null);
assert(_lifecycleState == _ElementLifecycle.active);
_firstBuild(); //調(diào)用 _firstBuild()方法
assert(_child != null);
}
順著_firstBuild()查看,發(fā)現(xiàn)他們的調(diào)用鏈如下:
StatelessElement 的 build()方法實現(xiàn)如下:
Widget build() => widget.build(this);
最后實際調(diào)用的是Widget的build()方法;
而StatefulElement中build()方法有些不一樣:
Widget build() => state.build(this);
StatefulElement中build()方法實際調(diào)用的是state 的 build()方法.
小總結(jié):
創(chuàng)建 widget 時,Flutter 框架會自動調(diào)用 createElement() 生成對應(yīng)的 Element,Element 生成后會自動調(diào)用 Element 的 mount() 方法將當(dāng)前的 Element 掛載到 Element 數(shù)上.而在 mount() 方法內(nèi)部會調(diào)用 StateLessWidget 的 build() 方法 和 StateFulWidget 中 State 的 build() 方法.
現(xiàn)在我們知道了Element中的mount()方法最終都會調(diào)用build(this)方法,并且傳遞的都是當(dāng)前的Element對象,而build()方法的格式如下:
Widget build(BuildContext context) { }
所以,我們在寫代碼時看到的BuildContext context就是Element:
上面介紹的是ComponentElement 中的 mount()方法,下面我們看看RenderObjectElement 中的 mount() 方法:
void mount(Element? parent, Object? newSlot) {
super.mount(parent, newSlot);
...
_renderObject = widget.createRenderObject(this);
...
}
可以看到RenderObjectElement中的mount()方法主要調(diào)用的是Widget中的widget.createRenderObject ()方法生成 RenderObject，然后賦值給自己的 _renderObject濒募。
因此可以總結(jié):
一: ComponentElement 的 mount 方法主要作用是執(zhí)行 build
二: RenderObjectElement 的 mount 方法主要作用是執(zhí)行createRenderObject()生成 RenderObject
Widget中還有一個很重要的方法static bool canUpdate():
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
為了進行Element復(fù)用鞭盟，在Element重新構(gòu)建前會先嘗試是否可以復(fù)用舊樹上相同位置的element，element節(jié)點在更新前都會調(diào)用其對應(yīng)Widget的canUpdate方法瑰剃，主要是判斷newWidget與oldWidget的runtimeType和key是否同時相等齿诉，如果同時相等就返回true，表示復(fù)用舊Element，否則返回false粤剧，重新創(chuàng)建歇竟。
寫這篇文章是為了方便自己復(fù)習(xí),參考了這邊文章,更詳細的請查看Flutter渲染之Widget、Element 和 RenderObject
