Flutter中Widget刷新邏輯+源碼解讀
前言
我們都知道StatefulWidget可以進行頁面刷新操作，而StatelessWidget并不具備這項功能被济，依舊在最開始拋出兩個問題:
- 為什么只有StatefulWidget可以做頁面更新操作？
- setState()之后是否是所有的組件都會重新創(chuàng)建涧团？
首先我們看一下setState(fn)都做了什么~
abstract class State<T extends StatefulWidget>...{
void setState(VoidCallback fn) {
...
final dynamic result = fn() as dynamic;
_element.markNeedsBuild();
}
}
//在Element類中
{
void markNeedsBuild() {
...
if (dirty) //如果是已經(jīng)標(biāo)記為臟只磷，則直接結(jié)束
return;
_dirty = true;
owner.scheduleBuildFor(this);
}
}
//owner屬于BuildOwner類
class BuildOwner {
void scheduleBuildFor(Element element) {
...
_dirtyElements.add(element);
}
void buildScope(Element context, [ VoidCallback callback ]) {
...
while (index < dirtyCount) {
_dirtyElements[index].rebuild();
}
}
}
//而rebuild最終還是會回到我們熟悉的performRebuild方法里,除了最基本的build方法。
void performRebuild() {
...
built = build();
...
_child = updateChild(_child, built, slot);
}
目前還有一個問題buildScope這個方法是否是Flutter隱式調(diào)用的呢泌绣？有答案的同學(xué)可以指教指教钮追。目前沒找到調(diào)用的位置。
- 經(jīng)過一系列調(diào)用阿迈，最終會到達到
updateChild這個方法里元媚，目前為止當(dāng)前包含當(dāng)前Widget的Element就會進入到updateChild更新流程里。 -
_dirty這個參數(shù)的使用，我認(rèn)為是非常優(yōu)化的刊棕。即使你做出重復(fù)刷新的操作也不會導(dǎo)致頁面的重復(fù)刷新炭晒。
在StatelessElement中并沒有找到setState等刷新方法，所以無法支持刷新甥角，回答了之前的問題一腰埂。雖然依舊可以以類似的方式實現(xiàn)為StatefulWidget的子類，但是會有問題蜈膨，這里就不具體說明屿笼，可以參考Flutter文檔Why is the build method on State, and not StatefulWidget?
現(xiàn)在來看看updateChild都做了什么~
// 只有類型相同且key相同的就是可以刷新的
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
//如果在widgetTree中當(dāng)前widget被刪除則直接結(jié)束,并在ElementTree中也刪除它
if (newWidget == null) {
deactivateChild(child);
return;
}
...
Element newChild;
if (child != null) {
...
if (hasSameSuperclass && child.widget == newWidget) {
//如果相同則不進行updata操作
newChild = child;
} else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
//如果可以更新則進行update操作
child.update(newWidget);
newChild = child;
}else{
//inflateWidget中會執(zhí)行createElement這里就不多贅述了
newChild = inflateWidget(newWidget, newSlot);
}
}
}
void update(covariant Widget newWidget) {
...
_widget = newWidget;
}
Element inflateWidget(Widget newWidget, dynamic newSlot) {
...
final Element newChild = newWidget.createElement();
newChild.mount(this, newSlot);
}
- 其實update在很多類中都有實現(xiàn)，但是基本上都是大差不差翁巍。
- 通過調(diào)試發(fā)現(xiàn)widget的對比是通過widget的hash值來進行的驴一，所以任何改動都會導(dǎo)致hash值不同。
- updateChild這個方法沒有什么好說的灶壶，只是在canUpdate中發(fā)現(xiàn)如果不使用key肝断，導(dǎo)致這個判斷
oldWidget.key == newWidget.key默認(rèn)為true。如果不想要進行復(fù)用的Widget則使用不同的key就可以實現(xiàn)驰凛。 -
update要注意方法中的_widget = newWidget胸懈，更新后會持有newWidget。 -
inflateWidget在遇到需要創(chuàng)建新的Element的時候恰响，看到了上一篇遇到過的createElement,mount也佐證了之前的Widget創(chuàng)建到Element的創(chuàng)建過程趣钱。
通過對刷新部分的源碼閱讀發(fā)現(xiàn)，并不是所有的Widget都被會刷新胚宦、重新創(chuàng)建首有，某些可以更新的Widget還是可以update后復(fù)用的；某些hash值沒有發(fā)生變化的則直接復(fù)用枢劝。
后序
- 整個源碼閱讀下來依舊發(fā)現(xiàn)Element這個中間者的設(shè)計是多么的巧妙井联，以及diff算法雖然看起來很簡單但是其中邏輯是非常嚴(yán)謹(jǐn)?shù)摹?/li>
- 在這兩部分的源碼閱讀發(fā)現(xiàn)，如果帶著問題去閱讀源碼您旁，不僅可以快速找到問題的原因烙常；還能提高源碼的閱讀速度，因為可以排除一些無關(guān)的方法鹤盒，不會毫無頭緒蚕脏。值得推薦。
