在react中,虛擬dom用於實現頁面中dom元素的高效更新;虛擬dom能夠將所有的dom操作累加起來,計算出所有的變化後,統一更新一次dom,能夠極大的提升效能,也可將虛擬dom轉換為原生應用程式元件實現跨端應用。
本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。
什麼是react中的虛擬DOM?
是框架中的概念,是程式設計師用JS 物件來模擬頁面上的DOM和DOM巢狀;
虛擬DOM的目的為何?
為了實現按頁面中DOM元素的高效更新;
在傳統的Web 應用中,我們往往會把資料的變化即時更新到使用者介面中,於是每次資料的微小變動都會造成DOM 樹的重新渲染。
虛擬DOM的目的是將所有操作累積起來,統計計算出所有的變化後,統一更新一次DOM。
極大的提升了效能
它使得跨端應用( React Native )得以實現。在瀏覽器端是將虛擬DOM轉換為一個個的瀏覽器DOM節點。也可以將他轉換為原生應用的元件,跨段應用程式就實現了。
DOM與虛擬DOM的區別
1,虛擬DOM不會進行排版與重繪操作
2,虛擬DOM進行頻繁修改,然後一次比較並修改真實DOM中需要改的部分(注意!),最後並在真實DOM中進行排版與重繪,減少過多DOM節點排版與重繪損耗
3,真實DOM頻繁排版與重繪的效率是相當低的
4,虛擬DOM有效降低大面積(真實DOM節點)的重繪與排版,因為最終與真實DOM比較差異,可以只渲染局部
推薦學習:《react影片教學》
以上是react的虛擬dom有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!