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演算法的介紹了，希望能幫到大家。