flutter之Element

2020-06-21

通过上一篇的介绍，我们知道了Widget本质上是UI的配置（静态、不可变），当Widget被加载时，它的Element对象首先会被创建，而后充当“大脑”和“仓库”的作用，最后将Widget的配置信息转化到对应RenderObject对象内。

Element的职责

管理

Widget的加载、生命周期、更新等流程；RenderObject的创建、更新等时机；child的加载、更新，都是通过Element实现或者执行的。

例如updateChild用于更新child的配置信息；inflateWidget用于创建Widget的Element对象；atachRenderObject方法将Element与RenderObject关联，并将RenderObject插入RenderObject树中。

仓库

Element中保存着很多信息，如常用的StatefulWidget的State，就是在StatefulElement中初始化时被创建并保存的，从而实现了跨Widget的状态恢复功能。

RenderObject获取也是通过Element实现的。之前说到过BuildContext就是Element，通过BuildContext就可以快速获取到Widget、State、RenderObject等储存在Element中的信息。

Element的类型

element

如图所示，Element可分为两类

Component Element: 组合型Element；Component Widget、Proxy Widget对应的Element都是这一类型，特点是子节点对应的Widget需要通过build方法去创建，同时，该类型Element都只有一个子节点
Render Element：渲染型Element；对应Render Widget。

Element与其他元素的关系

relate

Element通过parent、child指针形成Element Tree
Element持有Widget、RenderObject
State 是绑定在 Element上的

Element的生命周期

构造函数

在Widget篇中讲过，Widget定义了createElement方法，并将自身传入。在Element构造方法中接收到widget参数，并将其保存，对外暴露widget属性来访问到widget

Element(Widget widget)
  : assert(widget != null),
    _widget = widget;

  @override
  Widget get widget => _widget;
  Widget _widget;

在UI初次创建、UI刷新时新老Widget不匹配时，parent通过Element.inflateWidget->Widget.createElement创建child Element。

@protected
Element inflateWidget(Widget newWidget, dynamic newSlot) {
  assert(newWidget != null);
  final Key key = newWidget.key;
  /// 如果 widget 有 global key并且存在一个有相同 global key的 element，重用Element而不是创建一个新的
  if (key is GlobalKey) {
    final Element newChild = _retakeInactiveElement(key, newWidget);
    if (newChild != null) {
      assert(newChild._parent == null);
      assert(() {
        _debugCheckForCycles(newChild);
        return true;
      }());
      newChild._activateWithParent(this, newSlot);
      final Element updatedChild = updateChild(newChild, newWidget, newSlot);
      assert(newChild == updatedChild);
      return updatedChild;
    }
  }
  /// 创建新Element
  final Element newChild = newWidget.createElement();
  assert(() {
    _debugCheckForCycles(newChild);
    return true;
  }());
  newChild.mount(this, newSlot);
  assert(newChild._debugLifecycleState == _ElementLifecycle.active);
  return newChild;
}

parent通过Element.inflateWidget->newChild.mount()将新创建的child插入Element tree中指定的插槽处。

@mustCallSuper
void mount(Element parent, dynamic newSlot) {
  assert(_debugLifecycleState == _ElementLifecycle.initial);
  assert(widget != null);
  assert(_parent == null);
  assert(parent == null || parent._debugLifecycleState == _ElementLifecycle.active);
  assert(slot == null);
  assert(depth == null);
  assert(!_active);
  _parent = parent;
  _slot = newSlot;
  _depth = _parent != null ? _parent.depth + 1 : 1;
  // 此时，element处于active状态，内容随时可能显示在屏幕上。
  _active = true;
  if (parent != null)
    _owner = parent.owner;
  final Key key = widget.key;
  if (key is GlobalKey) {
    key._register(this);
  }
  _updateInheritance();
  assert(() {
    _debugLifecycleState = _ElementLifecycle.active;
    return true;
  }());
}

由于状态更新、UI变化等，element 所在位置的 Widget可能发生了变化，此时 parent 会调用 Element.update 去更新子节点，update 会以当前节点为根节点的子树上递归进行，直到叶子节点。

@mustCallSuper
void update(covariant Widget newWidget) {
  _widget = newWidget;
}

如果状态更新时，element被移除，此时parent将调用 deactivateChild 方法
- 从 element tree 中移除该 element
- 将相应的 render object 从 object tree 上移除
- 将 element添加到 owner._inactiveElements 中，在添加过程中会对以该element为根节点的子树上的所有节点调用deactivate方法。

@protected
void deactivateChild(Element child) {
  assert(child != null);
  assert(child._parent == this);
  child._parent = null;
  child.detachRenderObject();
  owner._inactiveElements.add(child); // this eventually calls child.deactivate()
  assert(() {
    if (debugPrintGlobalKeyedWidgetLifecycle) {
      if (child.widget.key is GlobalKey)
        debugPrint('Deactivated $child (keyed child of $this)');
    }
    return true;
  }());
}
void detachRenderObject() {
  visitChildren((Element child) {
    child.detachRenderObject();
  });
  _slot = null;
}

此时 element 处于 inactive 状态，并从屏幕消失，该状态一直持续到当前帧动画结束

从element进入 inactive 状态到当前帧动画结束期间，还有被“抢救”的机会，前提是带有 Global Key && 被重新插入树中，此时
- 该 element 会从 owner._inactiveElements中移除
- 对该 element subtree 上所有节点调用 active 方法
- 将相应的「render object」重新插入「render tree」中；
- 该 element subtree 又进入 “active” 状态，并将再次出现在屏幕上。
对于所有在当前帧动画结束时未能成功『抢救』回来的「Inactive Elements」都将被 unmount；

@mustCallSuper
void unmount() {
  assert(_debugLifecycleState == _ElementLifecycle.inactive);
  assert(_widget != null); // Use the private property to avoid a CastError during hot reload.
  assert(depth != null);
  assert(!_active);
  // Use the private property to avoid a CastError during hot reload.
  final Key key = _widget.key;
  if (key is GlobalKey) {
    key._unregister(this);
  }
  assert(() {
    _debugLifecycleState = _ElementLifecycle.defunct;
    return true;
  }());
}

至此，element 生命周期圆满结束。

lifecycle

Element的重要方法

updateChild

父节点通过该方法来修改子节点对应的Widget

@protected
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
  if (newWidget == null) {
    // 子节点对应的Widget已被移除
    if (child != null) // 如果有Element直接remove
      deactivateChild(child);
    return null;
  }
  Element newChild;
  if (child != null) {
    bool hasSameSuperclass = true;
    if (hasSameSuperclass && child.widget == newWidget) {
      // child前后没有变化
      if (child.slot != newSlot) // 在兄弟节点间移动了位置
        updateSlotForChild(child, newSlot);
      newChild = child;
    } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)) {
      // 可以（类型和key都相等）用newWidget修改child element
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      child.update(newWidget);
      newChild = child;
    } else {
      // 移除并创建新节点
      deactivateChild(child);
      assert(child._parent == null);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
    // newWidget是被新插入的，创建子节点
    newChild = inflateWidget(newWidget, newSlot);
  }
  return newChild;
}

// Widget.canUpdate 类型和key都相等
static bool canUpdate(Widget oldWidget, Widget newWidget) {
  return oldWidget.runtimeType == newWidget.runtimeType
      && oldWidget.key == newWidget.key;
}

update

@mustCallSuper
void update(covariant Widget newWidget) {
  _widget = newWidget;
}

基类中的update很简单，只是对_widget赋值。

StatelessElement

父类ComponenetElement没有重写该方法

void update(StatelessWidget newWidget) {
  super.update(newWidget);
  _dirty = true;
  rebuild();
}

// 在Element中默认实现 componentElement没有重写
void rebuild() {
  if (!_active || !_dirty)
    return;
  performRebuild();
}

// componentElement的实现
@override
void performRebuild() {
  Widget built;
  try {
    // StatelessElement
    // @override
    // Widget build() => widget.build(this);
    // 调用widget的build方法
    built = build();
    debugWidgetBuilderValue(widget, built);
  } catch (e, stack) {
  } finally {
    _dirty = false;
  }
  try {
    _child = updateChild(_child, built, slot);
  } catch (e, stack) {
    _child = updateChild(null, built, slot);
  }
}

StatefulElement

void update(StatefulWidget newWidget) {
  super.update(newWidget);
  final StatefulWidget oldWidget = _state._widget;
  // Notice that we mark ourselves as dirty before calling didUpdateWidget to
  // let authors call setState from within didUpdateWidget without triggering
  // asserts.
  _dirty = true;
  _state._widget = widget as StatefulWidget;
  try {
    _debugSetAllowIgnoredCallsToMarkNeedsBuild(true);
    // 调用didUpdateWidget生命周期
    final dynamic debugCheckForReturnedFuture = _state.didUpdateWidget(oldWidget) as dynamic;

  } finally {
    _debugSetAllowIgnoredCallsToMarkNeedsBuild(false);
  }
  rebuild();
}

// 在Element中默认实现 没有重写
void rebuild() {
  if (!_active || !_dirty)
    return;
  performRebuild();
}

@override
void performRebuild() {
  if (_didChangeDependencies) {
    // 调用state生命周期
    _state.didChangeDependencies();
    _didChangeDependencies = false;
  }
  super.performRebuild();
}

// super
@override
void performRebuild() {
  Widget built;
  try {
    // _state.build(this);
    built = build();
  } catch (e, stack) {
  } finally {
    _dirty = false;
  }
  try {
    _child = updateChild(_child, built, slot);
  } catch (e, stack) {
    _child = updateChild(null, built, slot);
  }
}

ProxyElement

void update(ProxyWidget newWidget) {
  final ProxyWidget oldWidget = widget;
  super.update(newWidget);
  updated(oldWidget);
  _dirty = true;
  rebuild();
}

void updated(covariant ProxyWidget oldWidget) {
  // 由子类实现
  notifyClients(oldWidget);
}

Widget build() => widget.child;

ProxyElement.update方法需要关注的是对updated的调用，其主要用于通知关联对象 Widget 有更新。
具体通知逻辑在子类中处理，如：InheritedElement会触发所有依赖者 rebuild (对于 StatefulElement 类型的依赖者，会调用State.didChangeDependencies)。

ProxyElement 的build操作很简单：直接返回widget.child。

RenderObjectElement

void update(covariant RenderObjectWidget newWidget) {
  super.update(newWidget);
  widget.updateRenderObject(this, renderObject);
  _dirty = false;
}

mount

当 Element 第一次被插入「Element Tree」上时，调用该方法。由于此时 parent 已确定，故在该方法中可以做依赖 parent 的初始化操作。经过该方法后，element 的状态从 “initial” 转到了 “active”。

@mustCallSuper
void mount(Element parent, dynamic newSlot) {
  _parent = parent;
  _slot = newSlot;
  _depth = _parent != null ? _parent.depth + 1 : 1;
  _active = true;
  if (parent != null)
    _owner = parent.owner;
  final Key key = widget.key;
  if (key is GlobalKey) {
    key._register(this);
  }
  _updateInheritance();
}

我们通过GlobalKey可以获取widget的renderObject，是在Element.mount的时候注册了传入的GlobalKey，保存在Map<GlobalKey, Element> _registry中。

ComponentElement

void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _firstBuild();
}

void _firstBuild() {
  rebuild(); // => build
}

RenderObjectElement mount

void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  // 创建render object
  _renderObject = widget.createRenderObject(this);
  // 插入render object tree
  attachRenderObject(newSlot);
  _dirty = false;
}

// SingleChildRenderObjectElement
@override
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _child = updateChild(_child, widget.child, null);
}

// MultiChildRenderObjectEleemnt
void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _children = List<Element>(widget.children.length);
  Element previousChild;
  for (int i = 0; i < _children.length; i += 1) {
    final Element newChild = inflateWidget(widget.children[i], previousChild);
    _children[i] = newChild;
    previousChild = newChild;
  }
}

小结

至此，对Element已经基本介绍完毕，里面的方法实在是有些多，下面用几张图片来更加清晰的认识Element的各个过程

创建

create

更新

update

重建

rebuild

销毁

destroy