深入理解React虛擬Dom

更新時間：2026年01月22日 10:24:21 作者：全馬必破三

虛擬DOM是一種輕量級的JavaScript對象,用于描述真實網(wǎng)頁的DOM結構和屬性,存在于內存中,本文就來詳細的介紹React虛擬Dom的實現(xiàn),感興趣的可以了解一下

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

維度	具體價值
性能	減少不必要的真實 DOM 操作，保證復雜場景下的性能下限（而非 “絕對更快”）
開發(fā)效率	聲明式編程，無需關注 DOM 操作細節(jié)，專注業(yè)務邏輯
跨平臺	一套虛擬 DOM 邏輯適配多端，降低多端開發(fā)成本
可維護性	統(tǒng)一的更新邏輯，便于調試和擴展（如 Fiber、并發(fā)更新）

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

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

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

您可能感興趣的文章: