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>，
然后再对每个子组件举行雷同的历程。