DOM和Diff算法你應該知道的那些事，快收藏！

      咱們在進行dom操做的時候可能會出現須要更新某一個dom元素，但若是不更新整個組件就沒法生效，其實咱們使用diff算法配合虛擬dom便可實現，下面小千就來給你們介紹一下。

      虛擬DOM

      本質上就是一個JS對象，用來描述你但願在屏幕上看到的內容

      Diff算法

      執行過程

      初次渲染時，React會根據初始化的state（model），建立一個虛擬DOM對象（樹）

      根據虛擬DOM生成真正的DOM，渲染到頁面

      當數據變化後(setState())，會從新根據新的數據，建立新的虛擬DOM對象（樹）

      與上一次獲得的虛擬DOM對象，使用Diff算法比對（找不一樣），獲得須要更新的內容

      最終，React只將變化的內容更新（patch）到DOM中，從新渲染到頁面

      代碼演示

      組件render()調用後，根據狀態和JSX結構生成虛擬DOM對象(render()方法的調用並不意味着瀏覽器進行渲染，render方法調用時意味着Diff算法開始比對了)

      示例中，只更新p元素的文本節點內容

      初次渲染的DOM對象

      數據更新以後的虛擬DOM對象

      小結

      工做角度：應用第一，原理第二

      原理有助於更好的理解React的自身運行機制

      setState() 異步更新數據

      父組件更新致使子組件更新，純組件提高性能

      思路清晰簡單爲前提，虛擬DOM和Diff保效率（渲染變化的組件）

      虛擬DOM -> state + JSX

      虛擬DOM最大的特色是 脫離了瀏覽器的束縛，也就是意味着只要是能支持js的地方均可以用到react，因此爲何說react是能夠進行跨平臺的開發

      以上就是關於dom和diff算法的介紹了，但願能幫到你們！

      原文來自千鋒教育：http://wh.mobiletrain.org/，轉載請註明出處。