/

虛擬 DOM

虛擬 DOM

虛擬 DOM 是 React 使用的一種技術，用於優化與瀏覽器的互動。

在 React 出現之前，許多現有的框架都是在每次更改時直接操作 DOM。

首先，什麼是 DOM？

DOM（文件物件模型）是頁面的樹狀表示，從 <html> 標籤開始，向下到每個子節點，稱為節點。

它保存在瀏覽器內存中，直接連接到您在頁面上看到的內容。
DOM 具有一個 API，您可以使用它來遍歷它，訪問每個節點，過濾它們，修改它們。

如果您沒有使用 jQuery 等提供的抽象 API，則 API 是您可能已經見過許多次的熟悉語法：

1
2
3
4
5
6
7
8
9
10
11
12
13
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 的唯一更新，因此瀏覽器在執行重新繪製和回流以渲染更改時只需執行一次。