我們在進行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/，轉載請注明出處。

總結

以上是生活随笔為你收集整理的DOM和Diff算法你应该知道的那些事，快收藏！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。