Flutter中的Widget根据类型不同,大体上可以分为以下几种:
在根Widget类中有一个抽象方法createElement(),也就意味着所有的Widget子类必须实现此方法:
StatelessWidget :
StatelessElement createElement() => StatelessElement(this);
StateFulWidget :
StatefulElement createElement() => StatefulElement(this);
SingleChildRenderObjectWidget :
SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);
MultiChildRenderObjectWidget :
MultiChildRenderObjectElement createElement() => MultiChildRenderObjectElement(this);
从源码中可以看到,每种Widget都会调用createElement(),返回不同的Element对象.并且会传入当前的Widget,而Element中会引用传过来的Widget:
Element(Widget widget)
: assert(widget != null),
_widget = widget;
所以 Element 中会持有 widget
需要注意StatefulElement的构造方法:
StatefulElement(StatefulWidget widget)
: _state = widget.createState(), //调用 widget 的 createState() 方法,生成 state
super(widget) {
assert(state._element == null);
state._element = this;
state._widget = widget; // 把 widget 赋值给 state 中的 widget
assert(state._debugLifecycleState == _StateLifecycle.created);
}
可以看到在StatefulElement的构造方法中,会调用widget的createState()方法,并且会把widget赋值给state.widget,所以我们能在state中直接使用widget.
Element还有一个很关键的方法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框架会根据Widget创建对应的Element,不同的Widget创建的Element类型也是不一样的,常用的Element有以下几种:
Element生成以后会调用Element的mount方法,将生成的Element挂载到Element树上.这里的 createElement 和mount 都是 Flutter框架自动调用的，不需要开发者手动调用。因此我们平时可能没关注这些过程。Element里面的 mount方法需要子类实现，我们来看看ComponentElement里的 mount方法:
void mount(Element? parent, Object? newSlot) {
super.mount(parent, newSlot);
assert(_child == null);
assert(_lifecycleState == _ElementLifecycle.active);
_firstBuild(); //调用 _firstBuild()方法
assert(_child != null);
}
顺着_firstBuild()查看,发现他们的调用链如下:
StatelessElement 的 build()方法实现如下:
Widget build() => widget.build(this);
最后实际调用的是Widget的build()方法;
而StatefulElement中build()方法有些不一样:
Widget build() => state.build(this);
StatefulElement中build()方法实际调用的是state 的 build()方法.
小总结:
创建 widget 时,Flutter 框架会自动调用 createElement() 生成对应的 Element,Element 生成后会自动调用 Element 的 mount() 方法将当前的 Element 挂载到 Element 数上.而在 mount() 方法内部会调用 StateLessWidget 的 build() 方法 和 StateFulWidget 中 State 的 build() 方法.
现在我们知道了Element中的mount()方法最终都会调用build(this)方法,并且传递的都是当前的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()方法主要调用的是Widget中的widget.createRenderObject ()方法生成 RenderObject，然后赋值给自己的 _renderObject。
因此可以总结:
一: ComponentElement 的 mount 方法主要作用是执行 build
二: RenderObjectElement 的 mount 方法主要作用是执行createRenderObject()生成 RenderObject
Widget中还有一个很重要的方法static bool canUpdate():
static bool canUpdate(Widget oldWidget, Widget newWidget) {
return oldWidget.runtimeType == newWidget.runtimeType
&& oldWidget.key == newWidget.key;
}
为了进行Element复用，在Element重新构建前会先尝试是否可以复用旧树上相同位置的element，element节点在更新前都会调用其对应Widget的canUpdate方法，主要是判断newWidget与oldWidget的runtimeType和key是否同时相等，如果同时相等就返回true，表示复用旧Element，否则返回false，重新创建。
写这篇文章是为了方便自己复习,参考了这边文章,更详细的请查看Flutter渲染之Widget、Element 和 RenderObject
