react基礎06-diff算法和虛拟DOM

 虛拟DOM和Diff算法是React裡面非常核心的兩個概念，我們需要有一個全面的認識，這對于後面使用腳手架開發項目，尤其是企業中前後端分離的項目有很大的幫助

虛拟DOM

内部執行流程

     1).用JavaScript對象結構表示DON樹的結構，然後用這個樹結建構一個真正的DOM樹，插入到文檔中

     2).當狀态變更時，重新構造一顆新的對象樹，然後用新的樹結構和舊的樹結構進行對比，記錄兩顆樹的差異

     3).把步驟2所記錄的差異應用到步驟1所建構的真正的DOM樹上，視圖就更新了。

原理剖析

    虛拟DOM本質上就是在JS和DOM之間做了一個緩存，可以類比CPU和硬碟，硬碟讀取速度比較慢，我們會在他們之間加緩存條。反之，既然DOM運作速度慢，那麼我們就在JS和DOM之間加個緩存，JS隻操作虛拟DOM，最後的時候再把變更的結果寫入DOM

diff算法

    1).如果兩顆樹的根元素類型不同，React會銷毀舊樹，建立新樹

    2).對與類型相同的React DOM元素，React會對比兩者的屬性是否相同，隻更新不同的屬性，當處理完這個DOM節點，React就會遞歸處理子節點。

    3).周遊插入元素，如果沒有key，React将改變每一個子節點删除重新建立，為了解決這個問題，React提供了一個key屬性，當子節點帶有key屬性，React會通過key來比對原始樹和後來的樹。

下面來看一下，diff算法的運作規則： 

<!--舊樹-->
<section><List /></section>
<!--新樹-->
<div><List /></div>
根元素不同，銷毀：舊樹

----------------------------------------------------------------------------------------
<!--改變前-->
<div classname="brfore" title="React"></div>
<!--改變後-->
<div classname="current" title="React"></div>
類型相同，屬性不同，隻更新：className屬性

----------------------------------------------------------------------------------------
<!--改變前-->
<div style = {{color:'blue',fontSize:'18px'}}></div>
<!--改變後-->
<div style = {{color:'green',fontSize:'18px'}}></div>
類型相同，屬性不同，隻更新：color屬性

----------------------------------------------------------------------------------------
<!--原DOM-->
<ul>
  <li key="1025">aa</li>
  <li key="1026">bb</li>
</ul>
<!--新的DOM-->
<ul>
  <li key="1024">cc</li>
  <li key="1025">aa</li>
  <li key="1026">bb</li>
</ul>
有key值，通過綁定key,React就知道帶有key'1024'的元素是新的，對于'1025','1026'僅僅移動位置即可，如果沒有key,就會銷毀所有的清單元素，重新建立新的清單元素。
           

kes使用注意

1.key屬性隻會在React内部使用，不會傳遞給元件

2.在周遊資料時，推薦建議使用key屬性

3.key隻需要保持與他的兄弟節點唯一即可，不需要全局唯一（同一個父級）

4.盡可能的減少數組index作為key，數組中插入元素等操作時，會降低效率