首先，virtual dom並沒有完全實現dom，即虛擬dom和真正地dom是不一樣的，virtual dom最主要的還是保留了element之間的層次關係和一些基本屬性。因為真實dom實在是太複雜，乙個空的element都複雜得能讓你崩潰，並且幾乎所有內容我根本不關心好嗎。所以virtual dom裡每乙個element實際上只有幾個屬性，即最重要的，最為有用的，並且沒有那麼多亂七八糟的引用，比如一些註冊的屬性和函式啊，這些都是預設的，建立虛擬dom進行diff的過程中大家都一致，是不需要進行比對的。所以哪怕是直接把virtual dom刪了，根據新傳進來的資料重新建立乙個新的virtual dom出來都非常非常非常快。（每乙個component的render函式就是在做這個事情，給新的virtual dom提供input）。
所以，引入了virtual dom之後，react是這麼幹的：你給我乙個資料，我根據這個資料生成乙個全新的virtual dom，然後跟我上一次生成的virtual dom去 diff，得到乙個patch，然後把這個patch打到瀏覽器的dom上去。完事。並且這裡的patch顯然不是完整的虛擬dom，而是新的虛擬dom和上一次的虛擬dom經過diff後的差異化的部分。
假設在任意時候有，virtualdom1 == dom1 （組織結構相同, 顯然虛擬dom和真實dom是不可能完全相等的，這裡的==是js中非完全相等）。當有新資料來的時候，我生成virtualdom2，然後去和virtualdom1做diff，得到乙個patch（差異化的結果）。然後將這個patch去應用到dom1上，得到dom2。如果一切正常，那麼有virtualdom2 == dom2（同樣是結構上的相等）。
這裡你可以做一些小實驗，去破壞virtualdom1 == dom1這個假設（手動在dom裡刪除一些element，這時候virtualdom裡的element沒有被刪除，所以兩邊不一樣了）。
然後給新的資料，你會發現生成的介面就不是你想要的那個介面了。
最後，回到為什麼virtual dom快這個問題上。
其實是由於每次生成virtual dom很快，diff生成patch也比較快，而在對dom進行patch的時候，雖然dom的變更比較慢，但是react能夠根據patch的內容，優化一部分dom操作，比如之前的那個例子。
重點就在最後，哪怕是我生成了virtual dom(需要耗費時間)，哪怕是我跑了diff（還需要花時間），但是我根據patch簡化了那些dom操作省下來的時間依然很可觀（這個就是時間差的問題了，即節省下來的時間 > 生成 virtual dom的時間 + diff時間）。所以總體上來說，還是比較快。
（這個說法存疑，但還是按這個來吧）
虛擬dom詳解：
虛擬DOM與真實DOM
先來個簡單的react例子 1.建立虛擬dom const vdom hello react h1 此處不要寫引號，因為不是字串 2.渲染虛擬dom到頁面 reactdom.render vdom document.getelementbyid test script head test div b...
React虛擬DOM轉換為真實DOM
按照上面的猜想，那麼render方法的作用就是 render方法接收兩個引數，第二個引數沒什麼好說的，固定寫法，第乙個引數有以下幾種情況 類元件函式元件 文字 數字 class extends component 然後再來處理函式元件，函式元件的寫法是,直接就返回了dom 對於文字 數字，直接新增到...
虛擬dom 虛擬 DOM 和 DOM diff
乙個能代表dom樹的物件，通常含有標籤名 標籤上的屬性 事件監聽和子元素及其它屬性。虛擬dom在vue和react中的示例 const rnode classname red 標籤上的屬性 onclick 事件 ref null,type div 標籤名 or 元件名 const vnode 事件 ...