React as a UI Runtime(三、协调)

1.协调

如果我们在同一个容器中使用两次 ReactDOM.render() 会发生什么？

ReactDOM.render(
  <button className="blue" />,
  document.getElementById('container')
);

// ... later ...

//  应该替换掉 button 宿主实例吗？
// 还是在已有的 button 上更新属性？
ReactDOM.render(
  <button className="red" />,
  document.getElementById('container')
);

再次说明，React的工作是使宿主树和提供的React元素的树一致。确定宿主树怎么样来响应新的信息的这个过程被称为协调。

协调有两种方法。React的简单的版本是抛弃已经存在的树，重新建立新的树：

let domContainer = document.getElementById('container');
// 清除树
domContainer.innerHTML = '';
// 创建新的宿主树
let domNode = document.createElement('button');
domNode.className = 'red';
domContainer.appendChild(domNode);

但是在DOM中，这是低效的，并且会丢失一些重要的信息像聚焦状态，选中状态，滚动状态等等。所以我们希望React像下面一样工作：

let domNode = domContainer.firstChild;
// Update existing host instance
domNode.className = 'red';

换句话说，React需要决定那时候需要更新一个已经存在的宿主实例来响应新的React元素，那时候需要新建一个宿主实例。

这就提出了关于分别的问题，React的元素可能一直在变化，那理论上那时候引用同一个宿主实例呢？

在我们的例子上是很简单的。我们已经创建了一个 <button> 作为第一个（也是唯一一个）子元素，并且我们希望在同一个地方再次渲染一个 <button> 。我们已经有一个 <button> 的宿主实例，我们就不需要再创建新的，再次使用它就好了。

这个已经与React的思想非常接近了。

如果元素的种类在树的同一个地方之前一次的渲染和接下来的渲染是相同的，React会再次使用已经存在的宿主实例。

下面是React带有备注的大致实现过程：

// let domNode = document.createElement('button');
// domNode.className = 'blue';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <button className="blue" />,
  document.getElementById('container')
);

// 可以再次使用吗? Yes! (button → button)
// domNode.className = 'red';
ReactDOM.render(
  <button className="red" />,
  document.getElementById('container')
);

// 可以再次使用吗? No! (button → p)
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <p>Hello</p>,
  document.getElementById('container')
);

// 可以再次使用吗? Yes! (p → p)
// domNode.textContent = 'Goodbye';
ReactDOM.render(
  <p>Goodbye</p>,
  document.getElementById('container')
);

这套规则对子树也同样适用。例如，当我们在更新有两个 <button> 子组件时的 <dialog> ，React首先决定是否重用 <dialog> ，

然后再对每一个子组件进行相同的过程。