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

React更新dom的依據：

1、不同類型的elements會產生不同的樹

2、通過render方法中包含key屬性的子元素，開發者可以示意哪些子元素可能是穩定的。

 

更新過程：

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

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

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

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

 

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

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

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

三、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