Host组件的实现就像是DOMComponent，和CompositeComponent更新截然不同，当他们接收到一个元素时，他们需要更新底层的DOM节点，就React的DOM而言，他们会更新DOM属性：

class DOMComponent {
  // ...

  receive(nextElement) {
    var node = this.node;
    var prevElement = this.currentElement;
    var prevProps = prevElement.props;
    var nextProps = nextElement.props;    
    this.currentElement = nextElement;

    // 移除旧的属性
    Object.keys(prevProps).forEach(propName => {
      if (propName !== @H_981_403@'children' && !nextProps.hasOwnProperty(propName)) {
        node.removeAttribute(propName);
      }
    });
    // 设置新的属性
    Object.keys(nextProps).forEach(propName => {
      if (propName !== @H_981_403@'children') {
        node.setAttribute(propName,nextProps[propName]);
      }
    });

    // ...

然后，host组件就开始更新他们的孩子，不像组合组件那样，他们只会包含最多一个孩子。

在下面这个例子中，我是用一个数组的内部实例，然后遍历它，或者是进行更新还是替换内部实例取决于新的元素和旧的元素的type是否相同。真正的调解器还会使用元素的key去处理，当然我们暂时不会涉及这个处理逻辑。

我们可以收集DOM节点需要操作的孩子然后批量的处理他们来节省时间：

// ...

    // 在这里React元素是一个数组
    var prevChildren = prevProps.children || [];
    if (!Array.isArray(prevChildren)) {
      prevChildren = [prevChildren];
    }
    var nextChildren = nextProps.children || [];
    if (!Array.isArray(nextChildren)) {
      nextChildren = [nextChildren];
    }
    // 在这里内部实例也是一个数组
    var prevRenderedChildren = this.renderedChildren;
    var nextRenderedChildren = [];

    // 我们迭代孩子增加操作到数组中
    var operationQueue = [];

    // Note: 这一份代码是极度简化了的
    // 他没有处理渲染以及key的问题
    // 他只是用来说明整个处理流程而不是细节

    for (var i = 0; i < nextChildren.length; i++) {
      // 尽可能得到该孩子的内部实例
      var prevChild = prevRenderedChildren[i];

      // 如果下标表示的没有内部实例
      // 那么会增加一个孩子到数组结尾
      // 并创建一个新的内部实例，挂载它，以及使用它。
      if (!prevChild) {
        var nextChild = instantiateComponent(nextChildren[i]);
        var node = nextChild.mount();

        // 记录我们需要增加的节点
        operationQueue.push({type: @H_981_403@'ADD',node});
        nextRenderedChildren.push(nextChild);
        continue;
      }

      // 如果元素的类型匹配，那么我们只更新实例.
      // 比如,<Button size="small" /> 会被更新为
      // <Button size="large" /> 但是不能是一个 <App />.
      var canUpdate = prevChildren[i].type === nextChildren[i].type;

      // 如果我们没有更新已经存在的实例，那么我们就不得不卸载然后
      // 再挂载新的节点去代替旧的
      if (!canUpdate) {
        var prevNode = prevChild.node;
        prevChild.unmount();

        var nextChild = instantiateComponent(nextChildren[i]);
        var nextNode = nextChild.mount();

        // 记录我们需要交换的节点
        operationQueue.push({type: @H_981_403@'REPLACE',prevNode,nextNode});
        nextRenderedChildren.push(nextChild);
        continue;
      }

      // 如果我们更新了已经存在的内部实例
      // 那就直接接收下一个新的元素，用它来更新自己
      prevChild.receive(nextChildren[i]);
      nextRenderedChildren.push(prevChild);
    }

    // 最后卸载不存在的孩子
    for (var j = nextChildren.length; j < prevChildren.length; j++) {
     var prevChild = prevRenderedChildren[j];
     var node = prevChild.node;
     prevChild.unmount();

     // 记录我们需要移除的节点
     operationQueue.push({type: @H_981_403@'REMOVE',node});
    }

    // 将孩子的列表更新到最新的版本
    this.renderedChildren = nextRenderedChildren;

    // ...

在最后一步我们执行了DOM操作，同样的，真正的调解器代码会更加复杂，因为他还要处理移除情况。

// ...

    // Process the operation queue.
    while (operationQueue.length > 0) {
      var operation = operationQueue.shift();
      switch (operation.type) {
      case @H_981_403@'ADD':
        this.node.appendChild(operation.node);
        break;
      case @H_981_403@'REPLACE':
        this.node.replaceChild(operation.nextNode,operation.prevNode);
        break;
      case @H_981_403@'REMOVE':
        this.node.removeChild(operation.node);
        break;
      }
    }
  }
}

10.顶级更新@H_404_8@

function mountTree(element,containerNode) {
  // 检查已经存在的树
  if (containerNode.firstChild) {
    var prevNode = containerNode.firstChild;
    var prevRootComponent = prevNode._internalInstance;
    var prevElement = prevRootComponent.currentElement;

    // 如果可以，重利用已经存在的root组件
    if (prevElement.type === element.type) {
      prevRootComponent.receive(element);
      return;
    }

    // 否则，卸载已经存在的树
    unmountTree(containerNode);
  }

  // ...

}

var rootEl = document.getElementById(@H_981_403@'root');

mountTree(<App />,rootEl);

mountTree(<App />,rootEl);