什麼是虛擬dom?
使用js物件模擬出dom樹中的元素和元素巢狀的關係,從而實現頁面元素的高效更新.
例如
123123
var vdom = ,
children: [
,children:[
123123]}
]}
虛擬dom相比於真實dom的優勢在**?
真實的dom在進行資料改變的時候會進行下面幾步操作:
生成乙個真實dom
某些操作導致資料變更,生成乙個新的dom樹
將新的dom樹完全替換之前的舊dom樹
可以想象一下,這三步操作都很消耗記憶體,並且代價很大
那麼虛擬dom是怎麼進行上面的操作呢?
根據虛擬dom生成乙個真實dom
修改資料造成dom的某個節點需要重新渲染,生成這個新的虛擬dom
比較新舊兩次的虛擬dom找出其中的差異
對比兩顆dom樹之間的差異,獲取到有差異的節點
把發生改變的內容進行替換,未發生改變的則不進行替換
這樣一來,便大大加快了更新頁面的速度,消耗的記憶體比較小,可以說是很便宜的dom
dom的diff演算法
上面說到了虛擬dom在更新dom樹之前會進行一次新舊dom的對比,那麼是根據什麼進行對比的?
那就是用dom的diff演算法
diff演算法分成三種:
tree diff
component diff
element diff
他們都是用來對比乙個dom樹中不同的部分,三者相結合,那就是虛擬dom的對比過程了
tree diff:將新的dom樹和舊的dom樹逐層進行比較,比較出不同的dom樹的層次,對比結束後,發生改變的元素一定能夠被找到
component diff: 在tree diff的時候,新舊dom樹的每一層中比較每乙個元件,如果發現了不同的元件,移除舊的元件,增加新的元件
element diff: 在進行component diff的時候, 在元件型別相同的情況下對比兩個元件之中的元素,
詳細的diff演算法可以看看這篇文章:
React 重溫之 虛擬DOM
虛擬dom可以說是現代前端庫的標配了，好像你乙個前端框架不實現乙個虛擬dom出門都不好意思跟人打招呼，那麼到底什麼是虛擬dom呢？那麼與之相對應的，我們可以簡單理解成虛擬dom就是用其他語言模擬出乙個dom的樹形結構 那麼問題來了，為什麼要用其它語言模擬dom，人家本來就已經是乙個很完整的樹形結構物...
React 虛擬 Dom 和 diff 演算法
react將dom抽象為虛擬dom,然後通過新舊虛擬dom 這兩個物件的差異 diff演算法 最終只把變化的部分重新渲染,提高渲染效率的過程 概念講完再描述一遍 一句話 用 js 物件的形式,來表現一棵真是的 dom 樹 傳統的 diff 演算法也是一直都有的 react 通過制定大膽的策略，將 o...
React虛擬DOM轉換為真實DOM
按照上面的猜想，那麼render方法的作用就是 render方法接收兩個引數，第二個引數沒什麼好說的，固定寫法，第乙個引數有以下幾種情況 類元件函式元件 文字 數字 class extends component 然後再來處理函式元件，函式元件的寫法是,直接就返回了dom 對於文字 數字，直接新增到...