1. 前言

上一篇文章讲到，Widget是描述一个UI元素的配置数据，Element才真正表明屏幕显示元素，是某个位置的Widget生成的实例。本篇文章则主要介绍Element的主要功能。html

经过上篇文章介绍的Widget Tree，Flutter Framework会生成一系列Element，这些Element构成了Element Tree，其主要功能以下：node

维护这棵Element Tree，根据Widget Tree的变化来更新Element Tree，包括：节点的插入、更新、删除、移动等；
将Widget和RenderObject关联到Element Tree上。

2. Element分类

如上图所示，Element从功能上看，能够分为两大类：markdown

ComponentElement

组合类Element。这类Element主要用来组合其余更基础的Element，获得功能更加复杂的Element。开发时经常使用到的StatelessWidget和StatefulWidget相对应的Element：StatelessElement和StatefulElement，即属于ComponentElement。架构

RenderObjectElement

渲染类Element，对应Renderer Widget，是框架最核心的Element。RenderObjectElement主要包括LeafRenderObjectElement，SingleChildRenderObjectElement，和MultiChildRenderObjectElement。其中，LeafRenderObjectElement对应的Widget是LeafRenderObjectWidget，没有子节点；SingleChildRenderObjectElement对应的Widget是SingleChildRenderObjectWidget，有一个子节点；MultiChildRenderObjectElement对应的Widget是MultiChildRenderObjecWidget ，有多个子节点。框架

3. Element生命周期

Element有4种状态：initial，active，inactive，defunct。其对应的意义以下：less

initial：初始状态，Element刚建立时就是该状态。
active：激活状态。此时Element的Parent已经经过mount将该Element插入Element Tree的指定的插槽处（Slot），Element此时随时可能显示在屏幕上。
inactive：未激活状态。当Widget Tree发生变化，Element对应的Widget发生变化，同时因为新旧Widget的Key或者的RunTimeType不匹配等缘由致使该Element也被移除，所以该Element的状态变为未激活状态，被从屏幕上移除。并将该Element从Element Tree中移除，若是该Element有对应的RenderObject，还会将对应的RenderObject从Render Tree移除。可是，此Element仍是有被复用的机会，例如经过GlobalKey进行复用。
defunct：失效状态。若是一个处于未激活状态的Element在当前帧动画结束时仍是未被复用，此时会调用该Element的unmount函数，将Element的状态改成defunct，并对其中的资源进行清理。

Element4种状态间的转换关系以下图所示： ide

4. ComponentElement

4.1 与核心元素关系

如上文所述，ComponentElement分为StatelessElement和StatefulElement，这两种Element同核心元素Widget以及State之间的关系以下图所示。如图：函数

ComponentElement持有Parent Element及Child Element，由此构成Element Tree.
ComponentElement持有其对应的Widget,对于StatefulElement，其还持有对应的State，以此实现Element和Widget之间的绑定。
State是被StatefulElement持有，而不是被StatefulWidget持有，便于State的复用。事实上，State和StatefulElement是一一对应的，只有在初始化StatefulElement时，才会初始化对应的State并将其绑定到StatefulElement上。

4.2 核心流程

一个Element的核心操做流程有，建立、更新、销毁三种，下面将分别介绍这三个流程。oop

建立

ComponentElement的建立起源与父Widget调用inflateWidget，而后经过mount将该Element挂载至Element Tree，并递归建立子节点。post

更新

由父Element执行更新子节点的操做（updateChild），因为新旧Widget的类型和Key均未发生变化，所以触发了Element的更新操做，并经过performRebuild将更新操做传递下去。其核心函数updateChild以后会详细介绍。

销毁

由父Element或更上级的节点执行更新子节点的操做（updateChild），因为新旧Widget的类型或者Key发生变化，或者新Widget被移除，所以致使该Element被转为未激活状态，并被加入未激活列表，并在下一帧被失效。

4.3 核心函数

下面对ComponentElement中的核心方法进行介绍。

inflateWidget

Element inflateWidget(Widget newWidget, dynamic newSlot) {
  final Key key = newWidget.key;
//复用GlobalKey对应的Element
  if (key is GlobalKey) {
    final Element newChild = _retakeInactiveElement(key, newWidget);
    if (newChild != null) {
      newChild._activateWithParent(this, newSlot);
      final Element updatedChild = updateChild(newChild, newWidget, newSlot);
      return updatedChild;
    }
  }
//建立Element，并挂载至Element Tree
  final Element newChild = newWidget.createElement();
  newChild.mount(this, newSlot);
  return newChild;
}
复制代码

inflateWidget的主要职责以下：

判断新Widget是否有GlobalKey，若是有GlobalKey，则从Inactive Elements列表中找到对应的Element并进行复用。
无可复用Element，则根据新Widget建立对应的Element，并将其挂载至Element Tree。

mount

void mount(Element parent, dynamic newSlot) {
//更新_parent等属性，将元素加入Element Tree
  _parent = parent;
  _slot = newSlot;
  _depth = _parent != null ? _parent.depth + 1 : 1;
  _active = true;
  if (parent != null) // Only assign ownership if the parent is non-null
    _owner = parent.owner;
//注册GlobalKey
  final Key key = widget.key;
  if (key is GlobalKey) {
    key._register(this);
  }
  _updateInheritance();
}
复制代码

当Element第一次被插入Element Tree的时候，该方法被调用。其主要职责以下：

将给Element加入Element Tree，更新_parent，_slot等树相关的属性。
若是新Widget有GlobalKey，将该Element注册进GlobalKey中，其做用下文会详细分析。
ComponentElement的mount函数会调用_firstBuild函数，触发子Widget的建立和更新。

performRebuild

@override
void performRebuild() {
//调用build函数，生成子Widget
  Widget built;
  built = build();
//根据新的子Widget更新子Element
  _child = updateChild(_child, built, slot);
}
复制代码

performRebuild的主要职责以下：

调用build函数，生成子Widget。
根据新的子Widget更新子Element。

update

@mustCallSuper
void update(covariant Widget newWidget) {
  _widget = newWidget;
}
复制代码

此函数主要职责为：

将对应的Widget更新为新的Widget。
在ComponentElement的各类子类中，还会调用rebuild函数触发对子Widget的重建。

updateChild

updateChild
@protected
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {
  if (newWidget == null) {
//新的Child Widget为null，则返回null；若是旧Child Widget，使其未激活
    if (child != null)
      deactivateChild(child);
    return null;
  }
  Element newChild;
  if (child != null) {
//新的Child Widget不为null，旧的Child Widget也不为null
    bool hasSameSuperclass = true;
    if (hasSameSuperclass && child.widget == newWidget) {
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      newChild = child;
    } else if (hasSameSuperclass && Widget.canUpdate(child.widget, newWidget)){
//Key和RuntimeType相同，使用update更新
      if (child.slot != newSlot)
        updateSlotForChild(child, newSlot);
      child.update(newWidget);
      newChild = child;
    } else {
//Key或RuntimeType不相同，使旧的Child Widget未激活，并对新的Child Widget使用inflateWidget
      deactivateChild(child);
      newChild = inflateWidget(newWidget, newSlot);
    }
  } else {
//新的Child Widget不为null，旧的Child Widget为null，对新的Child Widget使用inflateWidget
    newChild = inflateWidget(newWidget, newSlot);
  }

  return newChild;
}
复制代码

该方法的主要职责为：根据新的子Widget，更新旧的子Element，或者获得新的子Element。其核心逻辑能够用表格表示：

	newWidget == null	newWidget != null
Child == null	返回null	返回新Element
Child != null	移除旧的子Element，返回null	若是Widget能更新，更新旧的子Element，并返回之；不然建立新的子Element并返回。

该逻辑归纳以下：

若是newWidget为null，则返回null，同时若是有旧的子Element则移除之。
若是newWidget不为null，旧Child为null，则建立新的子Element，并返回之。
若是newWidget不为null，旧Child不为null，新旧子Widget的Key和RuntimeType等都相同，则调用update方法更新子Element并返回之。
若是newWidget不为null，旧Child不为null，新旧子Widget的Key和RuntimeType等不彻底相同，则说明Widget Tree有变更，此时移除旧的子Element，并建立新的子Element，并返回之。

5. RenderObjectElement

5.1 与核心元素关系

RenderObjectElement同核心元素Widget及RenderObject之间的关系以下图所示：

如图：

RenderObjectElement持有Parent Element，可是不必定持有Child Element，有可能无Child Element，有可能持有一个Child Element（Child），有可能持有多个Child Element(Children)。
RenderObjectElement持有对应的Widget和RenderObject，将Widget、RenderObject串联起来，实现了Widget、Element、RenderObject之间的绑定。

5.2 核心流程

如ComponentElement同样，RenderObjectElement的核心操做流程有，建立、更新、销毁三种，接下来会详细介绍这三种流程。

建立

RenderObjectElement的建立流程和ComponentElement的建立流程基本一致，其最大的区别是ComponentElement在mount后，会调用build来建立子Widget，而RenderObjectElement则是create和attach其RenderObject。

更新

RenderObjectElement的更新流程和ComponentElement的更新流程也基本一致，其最大的区别是ComponentElement的update函数会调用build函数，从新触发子Widget的构建，而RenderObjectElement则是调用updateRenderObject对绑定的RenderObject进行更新。

销毁

RenderObjectElement的销毁流程和ComponentElement的销毁流程也基本一致。也是由父Element或更上级的节点执行更新子节点的操做（updateChild），致使该Element被停用，并被加入未激活列表，并在下一帧被失效。其不同的地方是在unmount Element的时候，会调用didUnmountRenderObject失效对应的RenderObject。

5.3 核心函数

下面对RenderObjectElement中的核心方法进行介绍。

inflateWidget

该函数和ComponentElement的inflateWidget函数彻底一致，此处再也不复述。

mount

void mount(Element parent, dynamic newSlot) {
  super.mount(parent, newSlot);
  _renderObject = widget.createRenderObject(this);
  attachRenderObject(newSlot);
  _dirty = false;
}
复制代码

该函数的调用时机和ComponentElement的一致，当Element第一次被插入Element Tree的时候，该方法被调用。其主要职责也和ComponentElement的一致，此处只列举不同的职责，职责以下：

调用createRenderObject建立RenderObject，并使用attachRenderObject将RenderObject关联到Element上。
SingleChildRenderObjectElement会调用updateChild更新子节点，MultiChildRenderObjectElement会调用每一个子节点的inflateWidget重建全部子Widget。

performRebuild

@override
void performRebuild() {
//更新renderObject
  widget.updateRenderObject(this, renderObject);
  _dirty = false;
}
复制代码

performRebuild的主要职责以下：

调用updateRenderObject更新对应的RenderObject。

update

@override
void update(covariant RenderObjectWidget newWidget) {
  super.update(newWidget);
  widget.updateRenderObject(this, renderObject);
  _dirty = false;
}
复制代码

update的主要职责以下：

将对应的Widget更新为新的Widget。
调用updateRenderObject更新对应的RenderObject。

updateChild

该函数和ComponentElement的inflateWidget函数彻底一致，此处再也不复述。

updateChildren

@protected
List<Element> updateChildren(List<Element> oldChildren, List<Widget> newWidgets, { Set<Element> forgottenChildren }) {
  int newChildrenTop = 0;
  int oldChildrenTop = 0;
  int newChildrenBottom = newWidgets.length - 1;
  int oldChildrenBottom = oldChildren.length - 1;

  final List<Element> newChildren = oldChildren.length == newWidgets.length ?
      oldChildren : List<Element>(newWidgets.length);

  Element previousChild;

// 从顶部向下更新子Element
  // Update the top of the list.
  while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
    final Element oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenTop]);
    final Widget newWidget = newWidgets[newChildrenTop];
    if (oldChild == null || !Widget.canUpdate(oldChild.widget, newWidget))
      break;
    final Element newChild = updateChild(oldChild, newWidget, IndexedSlot<Element>(newChildrenTop, previousChild));
    newChildren[newChildrenTop] = newChild;
    previousChild = newChild;
    newChildrenTop += 1;
    oldChildrenTop += 1;
  }

// 从底部向上扫描子Element
  // Scan the bottom of the list.
  while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
    final Element oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenBottom]);
    final Widget newWidget = newWidgets[newChildrenBottom];
    if (oldChild == null || !Widget.canUpdate(oldChild.widget, newWidget))
      break;
    oldChildrenBottom -= 1;
    newChildrenBottom -= 1;
  }

// 扫描旧的子Element列表里面中间的子Element，保存Widget有Key的Element到oldKeyChildren，其余的失效
  // Scan the old children in the middle of the list.
  final bool haveOldChildren = oldChildrenTop <= oldChildrenBottom;
  Map<Key, Element> oldKeyedChildren;
  if (haveOldChildren) {
    oldKeyedChildren = <Key, Element>{};
    while (oldChildrenTop <= oldChildrenBottom) {
      final Element oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenTop]);
      if (oldChild != null) {
        if (oldChild.widget.key != null)
          oldKeyedChildren[oldChild.widget.key] = oldChild;
        else
          deactivateChild(oldChild);
      }
      oldChildrenTop += 1;
    }
  }

// 根据Widget的Key更新oldKeyChildren中的Element。
  // Update the middle of the list.
  while (newChildrenTop <= newChildrenBottom) {
    Element oldChild;
    final Widget newWidget = newWidgets[newChildrenTop];
    if (haveOldChildren) {
      final Key key = newWidget.key;
      if (key != null) {
        oldChild = oldKeyedChildren[key];
        if (oldChild != null) {
          if (Widget.canUpdate(oldChild.widget, newWidget)) {
            // we found a match!
            // remove it from oldKeyedChildren so we don't unsync it later
            oldKeyedChildren.remove(key);
          } else {
            // Not a match, let's pretend we didn't see it for now.
            oldChild = null;
          }
        }
      }
    }

    final Element newChild = updateChild(oldChild, newWidget, IndexedSlot<Element>(newChildrenTop, previousChild));
    newChildren[newChildrenTop] = newChild;
    previousChild = newChild;
    newChildrenTop += 1;
  }

  newChildrenBottom = newWidgets.length - 1;
  oldChildrenBottom = oldChildren.length - 1;

  // 从下到上更新底部的Element。.
  while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
    final Element oldChild = oldChildren[oldChildrenTop];
    final Widget newWidget = newWidgets[newChildrenTop];
    final Element newChild = updateChild(oldChild, newWidget, IndexedSlot<Element>(newChildrenTop, previousChild));
    newChildren[newChildrenTop] = newChild;
    previousChild = newChild;
    newChildrenTop += 1;
    oldChildrenTop += 1;
  }

// 清除旧子Element列表中其余全部剩余Element
  // Clean up any of the remaining middle nodes from the old list.
  if (haveOldChildren && oldKeyedChildren.isNotEmpty) {
    for (final Element oldChild in oldKeyedChildren.values) {
      if (forgottenChildren == null || !forgottenChildren.contains(oldChild))
        deactivateChild(oldChild);
    }
  }

  return newChildren;
}
复制代码

该函数的主要职责以下：

复用能复用的子节点，并调用updateChild对子节点进行更新。
对不能更新的子节点，调用deactivateChild对该子节点进行失效。

其步骤以下：

从顶部向下更新子Element。
从底部向上扫描子Element。
扫描旧的子Element列表里面中间的子Element，保存Widget有Key的Element到oldKeyChildren，其余的失效。
对于新的子Element列表，若是其对应的Widget的Key和oldKeyChildren中的Key相同，更新oldKeyChildren中的Element。
从下到上更新底部的Element。
清除旧子Element列表中其余全部剩余Element。

6. 小结

本文主要介绍了Element相关知识，重点介绍了其分类，生命周期，和核心函数。重点以下：

维护Element Tree，根据Widget Tree的变化来更新Element Tree，包括：节点的插入、更新、删除、移动等；并起到纽带的做用，将Widget以及RenderObject关联到Element Tree上。
Element分为ComponentElement和RenderObjectElement，前者负责组合子Element，后者负责渲染。
Element的主要复用和更新逻辑由其核心函数updateChild实现，具体逻辑见上文。

7. 参考文档

深刻浅出 Flutter Framework 之 Element
Flutter实战

Flutter框架分析（三）-- Element