虛擬 DOM 是 React 使用的一種技術，用於優化與瀏覽器的互動。
在 React 出現之前，許多現有的框架都是在每次更改時直接操作 DOM。
首先，什麼是 DOM？
DOM（文件物件模型）是頁面的樹狀表示，從 <html> 標籤開始，向下到每個子節點，稱為節點。
它保存在瀏覽器內存中，直接連接到您在頁面上看到的內容。 DOM 具有一個 API，您可以使用它來遍歷它，訪問每個節點，過濾它們，修改它們。
如果您沒有使用 jQuery 等提供的抽象 API，則 API 是您可能已經見過許多次的熟悉語法：
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()
React 在所涉及的 React 渲染方面保留了 DOM 表示的副本：虛擬 DOM
虛擬 DOM 的解釋
每次 DOM 更改時，瀏覽器都必須執行兩個密集的操作：重新繪製（對元素進行視覺或內容更改，不會影響相對於其他元素的佈局和定位）和回流（重新計算頁面或整個頁面佈局的一部分的佈局）。
React 使用虛擬 DOM 來幫助瀏覽器在需要對頁面進行更改時使用更少的資源。
當您在組件上調用 setState()，並指定與先前狀態不同的狀態時，React 將該組件標記為髒。這是關鍵：React 只在組件明確更改狀態時進行更新。
接下來發生的是：
- React 根據標記為髒的組件對虛擬 DOM 進行更新（還會進行一些其他檢查，例如觸發
shouldComponentUpdate()） - 執行差分算法以協調更改
- 更新實際的 DOM
虛擬 DOM 的優勢：批次處理
關鍵在於 React 批量處理大部分更改，並通過同時更改所有需要更改的元素來執行對實際 DOM 的唯一更新，因此瀏覽器在執行重新繪製和回流以渲染更改時只需執行一次。