我們?cè)谶M(jìn)行dom操作的時(shí)候可能會(huì)出現(xiàn)需要更新某一個(gè)dom元素，但如果不更新整個(gè)組件就無(wú)法生效，其實(shí)我們使用diff算法配合虛擬dom即可實(shí)現(xiàn)，下面小千就來(lái)給大家介紹一下。

      虛擬DOM

      本質(zhì)上就是一個(gè)JS對(duì)象，用來(lái)描述你希望在屏幕上看到的內(nèi)容

      Diff算法

      執(zhí)行過(guò)程

      初次渲染時(shí)，React會(huì)根據(jù)初始化的state（model），創(chuàng)建一個(gè)虛擬DOM對(duì)象（樹(shù)）

      根據(jù)虛擬DOM生成真正的DOM，渲染到頁(yè)面

      當(dāng)數(shù)據(jù)變化后(setState())，會(huì)重新根據(jù)新的數(shù)據(jù)，創(chuàng)建新的虛擬DOM對(duì)象（樹(shù)）

      與上一次得到的虛擬DOM對(duì)象，使用Diff算法比對(duì)（找不同），得到需要更新的內(nèi)容

      最終，React只將變化的內(nèi)容更新（patch）到DOM中，重新渲染到頁(yè)面

      代碼演示

      組件render()調(diào)用后，根據(jù)狀態(tài)和JSX結(jié)構(gòu)生成虛擬DOM對(duì)象(render()方法的調(diào)用并不意味著瀏覽器進(jìn)行渲染，render方法調(diào)用時(shí)意味著Diff算法開(kāi)始比對(duì)了)

      示例中，只更新p元素的文本節(jié)點(diǎn)內(nèi)容

      初次渲染的DOM對(duì)象

      數(shù)據(jù)更新之后的虛擬DOM對(duì)象

      小結(jié)

      工作角度：應(yīng)用第一，原理第二

      原理有助于更好的理解React的自身運(yùn)行機(jī)制

      setState() 異步更新數(shù)據(jù)

      父組件更新導(dǎo)致子組件更新，純組件提升性能

      思路清晰簡(jiǎn)單為前提，虛擬DOM和Diff保效率（渲染變化的組件）

      虛擬DOM -> state + JSX

      虛擬DOM最大的特點(diǎn)是 脫離了瀏覽器的束縛，也就是意味著只要是能支持js的地方都可以用到react，所以為什么說(shuō)react是可以進(jìn)行跨平臺(tái)的開(kāi)發(fā)

      以上就是關(guān)于dom和diff算法的介紹了，最后歡迎對(duì)前端開(kāi)發(fā)感興趣的同學(xué)來(lái)到千鋒web前端培訓(xùn)班參加我們的前端培訓(xùn)課程的學(xué)習(xí)，全程名師面授確保教學(xué)質(zhì)量，現(xiàn)在咨詢還有免費(fèi)學(xué)習(xí)資料可以領(lǐng)取，趕緊來(lái)了解一下吧。