虛擬DOM

虛擬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會相對於標記為臟組件的組件更新Virtual DOM（帶有一些額外的檢查，例如觸發shouldComponentUpdate()）
  • 運行差異算法以協調更改
  • 更新真實的DOM

虛擬DOM為何有幫助：批處理

關鍵是React通過批量更改所有需要更改的元素來對大量更改進行批處理並對真實DOM執行唯一更新，因此瀏覽器必須執行的重繪和重排操作才能呈現更改。只執行一次。

免費下載我的反應手冊


更多反應教程：


在線技術維基！