react协调算法（页面更新机制）

对比算法：当对比两棵树时，React首先比较两个根节点。根节点的type不同，其行为也不同

 

1. 不同类型的元素：卸载（销毁旧的节点及状态）旧的元素重建新的元素

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

2. 相同类型元素：对比属性，仅更新变化的属性

<div className="before" title="stuff" />

<div className="after" title="stuff" />

<div style={{color: 'red', fontWeight: 'bold'}} />

<div style={{color: 'green', fontWeight: 'bold'}} />

3. 相同类型的组件元素：递归子节点、key属性

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

注：Keys应该是稳定的，可预测的，且唯一的。不稳定的key（类似由Math.random()生成的）将使得大量组件实例和DOM节点进行不必要的重建，使得性能下降并丢失子组件的状态。