一、虛擬 DOM（Virtual DOM）的核心定義

虛擬Dom本質(zhì)上是一個Javascript對象，它用來描述真實網(wǎng)頁中Dom樹的結(jié)構(gòu)和屬性，它是輕量級的，存在于內(nèi)存中，操作成本遠低于真實Dom

二、虛擬 DOM 的核心設(shè)計目的

1、解決真實DOM操作的性能痛點

○真實 Dom 的增刪改查會觸發(fā)瀏覽器的【重排（Reflow）】和【重繪（Repaint）】，頻繁操作會導(dǎo)致性能損耗；

○而虛擬 Dom 是JS對象，操作成本極低，React通過對比新舊虛擬Dom的差異，只更新需要變化的真實Dom，避免全局污染

2. 支撐跨平臺能力

虛擬 DOM 是「平臺無關(guān)」的抽象：React 只需實現(xiàn)不同平臺的「渲染器（Renderer）」，就能將虛擬 DOM 映射到不同環(huán)境：

• React DOM：映射到瀏覽器真實 DOM；
• React Native：映射到移動端原生組件（如 View 對應(yīng) iOS 的 UIView、Android 的 TextView）；
• React SSR：映射到服務(wù)端 HTML 字符串；

3. 實現(xiàn)聲明式編程模型

開發(fā)者只需描述「UI 應(yīng)該是什么樣」（如 JSX），無需關(guān)心「如何操作 DOM」（如原生 JS 的appendChild/removeChild），React 通過虛擬 DOM 自動處理 DOM 更新的細節(jié)，降低心智負擔

三、虛擬 DOM 的核心工作流程

思路：用JS對象模擬Dom，狀態(tài)變化時，先在JS對象上計算和比較，找出最小差異，然后再將這些差異批量更新到真實Dom

React 圍繞虛擬 DOM 的更新流程分為三步：創(chuàng)建 → 對比（Diff） → 更新

1. 初始化：生成虛擬 DOM

JSX 是創(chuàng)建虛擬 DOM 的「語法糖」，最終會被 Babel 編譯為React.createElement調(diào)用，生成虛擬 DOM：

// 寫的JSX
<div id="app">Hello</div>

// 編譯后（簡化版）
React.createElement('div', { id: 'app' }, 'Hello');

// 執(zhí)行后返回虛擬DOM對象（即上文的vdom）

2. 更新：Diff 算法對比新舊虛擬 DOM

當組件的state/props變化時，React 會生成新的虛擬 DOM，通過「Diff 算法」對比新舊虛擬 DOM 的差異，找出「最小更新集」。Diff 算法的核心策略：

• 層級比較：只對比同層級節(jié)點，跨層級節(jié)點直接刪除重建
• 同類型節(jié)點比較：
  • 標簽節(jié)點：對比屬性（如id/className），只更新變化的屬性
  • 文本節(jié)點：直接對比文本內(nèi)容，不同則更新
• 列表節(jié)點 key：列表渲染時通過key標識唯一節(jié)點，避免錯位更新
• 組件節(jié)點比較：類型相同則更新 props，遞歸對比組件內(nèi)部子 VNode

3. 渲染：批量更新真實 DOM

React 將 Diff 找到的差異「批量應(yīng)用」到真實 DOM，且更新過程是異步的（如合成事件中setState會批量執(zhí)行），進一步優(yōu)化性能。

四、虛擬 DOM 的核心優(yōu)勢（澄清常見誤區(qū)）

1. 優(yōu)勢總結(jié)

2. 常見誤區(qū)澄清

• ? 誤區(qū) 1：“虛擬 DOM 比直接操作真實 DOM 更快”
• ? 真相：簡單場景下（如單次更新一個節(jié)點），直接操作真實 DOM 可能更快；虛擬 DOM 的價值是「在復(fù)雜場景下避免開發(fā)者寫出低效的 DOM 操作」，保證性能穩(wěn)定性。

• ? 誤區(qū) 2：“Diff 算法是最優(yōu)的”
• ? 真相：Diff 算法是「權(quán)衡后的最優(yōu)解」，因為實際業(yè)務(wù)中跨層級操作極少，犧牲小部分最優(yōu)性換來了時間復(fù)雜度的大幅降低。

• ? 誤區(qū) 3：“React 16 + 的 Fiber 替換了虛擬 DOM”
• ? 真相：Fiber 是對虛擬 DOM 執(zhí)行流程的優(yōu)化（將 Diff 拆分為可中斷的小任務(wù)），而非替換虛擬 DOM，核心仍依賴虛擬 DOM 的抽象。

3、缺點

• a.額外的JavaScripti計算開銷
• b.首次渲染的輕微延遲
• c.內(nèi)存占用

到此這篇關(guān)于深入理解React虛擬Dom的文章就介紹到這了,更多相關(guān)React虛擬Dom內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！