前言

之前的文章都有简述Element，这篇将着重去讲Element
Widget是描述一个UI元素的配置数据，Element才真正代表屏幕显示元素

分类

如上图所示Element分为两类

• 
  
• 
  

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

  
  
  
• 
  

  RenderObjectElement ： 渲染类Element，对应Renderer Widget，是框架最核心的Element。RenderObjectElement主要包括LeafRenderObjectElement（叶子无节点），SingleChildRenderObjectElement（单child），和MultiChildRenderObjectElement（多child）。

  
  
  

Element生命周期

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

• 
  
• 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种状态间的转换关系如下图所示：

ComponentElement

State和StatefulElement是一一对应的，只有在初始化StatefulElement时，才会初始化对应的State并将其绑定到StatefulElement上

核心流程

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

创建

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

更新

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

销毁

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

核心函数

• 
  
• 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;

}

复制代码

1. 
   
2. 判断新Widget是否有GlobalKey，如果有GlobalKey，则从Inactive Elements列表中找到对应的Element并进行复用。（可能从树的另一个位置嫁接或重新激活）
   
3. 无可复用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();

}

复制代码

1. 
   
2. 将给Element加入Element Tree，更新_parent，_slot等树相关的属性。
   
3. 如果新Widget有GlobalKey，将该Element注册进GlobalKey中，其作用下文会详细分析。
   
4. ComponentElement的mount函数会调用_firstBuild函数，触发子Widget的创建和更新。
   

• 
  
• performRebuild
  

@override
void performRebuild() {
//调用build函数，生成子Widget

  Widget built;

  built = build();
//根据新的子Widget更新子Element

  _child = updateChild(_child, built, slot);

}

复制代码

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

• 
  
• update
  

@mustCallSuper
void update(covariant Widget newWidget) {

  _widget = newWidget;

}

复制代码

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

• 
  
• 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。
逻辑如下（伪代码）：

if（newWidget == null）{
if(Child == null){
return null;

	}else{

		移除旧的子Element，返回null

	}

}else{
if(Child == null){

		返回新Element

	}else{

		如果Widget能更新，更新旧的子Element，并返回之；否则创建新的子Element并返回。

	}

}


复制代码

该逻辑概括如下：

1. 
   
2. 如果newWidget为null，则返回null，同时如果有旧的子Element则移除之。
   
3. 如果newWidget不为null，旧Child为null，则创建新的子Element，并返回之。
   
4. 如果newWidget不为null，旧Child不为null，新旧子Widget的Key和RuntimeType等都相同，则调用update方法更新子Element并返回之。
   
5. 如果newWidget不为null，旧Child不为null，新旧子Widget的Key和RuntimeType等不完全相同，则说明Widget Tree有变动，此时移除旧的子Element，并创建新的子Element，并返回之。
   

RenderObjectElement

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

如图：

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

核心流程

如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。

核心函数

• 
  
• 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的一致，此处只列举不一样的职责，职责如下：

1. 
   
2. 调用createRenderObject创建RenderObject，并使用attachRenderObject将RenderObject关联到Element上。
   
3. 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的主要职责如下：

1. 
   
2. 将对应的Widget更新为新的Widget。
   
3. 调用updateRenderObject更新对应的RenderObject。
   

• 
  
• updateChild
  

@protected
List updateChildren(List oldChildren, List newWidgets, { Set forgottenChildren }) {

  int newChildrenTop = 0;

  int oldChildrenTop = 0;

  int newChildrenBottom = newWidgets.length - 1;

  int oldChildrenBottom = oldChildren.length - 1;

final List newChildren = oldChildren.length == newWidgets.length ?

      oldChildren : List(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(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 oldKeyedChildren;
if (haveOldChildren) {

    oldKeyedChildren = {};
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(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(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;

}

复制代码,>,>

该函数的主要职责如下：

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

其步骤如下：

1. 
   
2. 从顶部向下更新子Element。
   
3. 从底部向上扫描子Element。
   
4. 扫描旧的子Element列表里面中间的子Element，保存Widget有Key的Element到oldKeyChildren，其他的失效。
   
5. 对于新的子Element列表，如果其对应的Widget的Key和oldKeyChildren中的Key相同，更新oldKeyChildren中的Element。
   
6. 从下到上更新底部的Element。
   
7. 清除旧子Element列表中其他所有剩余Element。
   

文章参考于：zhuanlan.zhihu.com/p/369286610