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節點進行不必要的重建，使得性能下降並丟失子組件的狀態。