基礎知識 - HTML DOM 與虛擬 DOM

HTML DOM 很貴

每個網頁在內部表示為物件樹。該表示稱為文件物件模型。此外，它是一個語言中立的介面，允許程式語言（如 JavaScript）訪問 HTML 元素。

換一種說法

HTML DOM 是如何獲取，更改，新增或刪除 HTML 元素的標準。

但是，那些 DOM 操作非常昂貴。

虛擬 DOM 是一種解決方案

因此，React 的團隊提出了抽象 HTML DOM 並建立自己的 Virtual DOM 的想法，以便計算我們需要在 HTML DOM 上應用的最小運算元，以複製應用程式的當前狀態。

Virtual DOM 可以節省不必要的 DOM 修改時間

究竟怎麼樣？

在每個時間點，React 都將應用程式狀態表示為 Virtual DOM。每當應用程式狀態發生變化時，這些都是 React 為優化效能而執行的步驟

1. 生成一個新的 Virtual DOM ，它代表我們應用程式的新狀態

2. 比較舊的 Virtual DOM（代表當前的 HTML DOM）與新的 Virtual DOM

3. 基於 2.找到將舊虛擬 DOM（代表當前 HTML DOM）轉換為新虛擬 DOM 的最小運算元

• 要了解更多資訊 - 閱讀 React 的 Diff 演算法

4. 找到這些操作後，它們將對映到等效的 HTML DOM 操作中

• 記住， Virtual DOM 只是 HTML DOM 的抽象，它們之間存在同構關係

5. 現在，已找到並轉移到其等效 HTML DOM 操作的最小運算元現在直接應用於應用程式的 HTML DOM ，從而節省了不必要地修改 HTML DOM 的時間。

注意：應用於 Virtual DOM 的操作很便宜，因為 Virtual DOM 是一個 JavaScript 物件。