學習React系列（六）——更新dom細節於原理

React更新dom的依據：

一、不一樣類型的elements會產生不一樣的樹

二、經過render方法中包含key屬性的子元素，開發者能夠示意哪些子元素多是穩定的。

 

更新過程：

1、根元素類型不一樣：舊樹被卸載，舊的Dom節點銷燬，Component實例將接收componentWillUnmount()方法，

當新建一個樹，新節點插入到Dom中，Component實例接收componentWillMount()而後接收componentDidMount()

全部與舊樹關聯的狀態所有銷燬。

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

 

2、組件類型相同：組件更新時，實例不變，渲染由狀態控制，React經過更新底層

的組件實例屬性來產生新的元素，並調用底層組件實例的componentWillReceiveProps()和componentWillUpdate()，而後

render（）方法被調用，同時對比算法會遞歸處理以前的結果和新的結果

3、dom類型一致：只更新改變的屬性值，其餘的保持不變。

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

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

 

React是如何迭代子組件的呢？

默認狀況下，同一時間遍歷新舊兩組子代，一旦發現不一樣便當即變化。這也就致使了下面例子中的差別

//低效
<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>



//高效
<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

這裏呢能夠經過給每個項添加一個key來鎖定該項，通知react哪些元素是新的，哪些是已經存在的，就不須要再從新生成

新的舊組件了

 

參考：https://reactjs.org/docs/reconciliation.html