虛擬 DOM：React 快速 DOM 更新背後的技術。

大家好，我很高興能夠開始一系列新的帖子，我將嘗試解釋程式設計世界中的各種概念。我們將涵蓋從冪等和慣用術語到與庫和框架相關的更具體概念的所有內容。今天，我們將深入探討這樣一個主題 - 虛擬 DOM.

如果您覺得這有幫助，請不要忘記按讚、分享和評論您希望我接下來介紹哪些主題。我們不要再浪費時間了，直接跳到虛擬 DOM！

注意：在我們繼續之前，重要的是要了解虛擬 DOM 的概念並不是 React 獨有的。其他 JavaScript 前端函式庫，例如 Vue，也使用它來增強渲染效能。

DOM

DOM（文件物件模型）是使用節點或物件的 HTML 文件（或網頁/Web 應用程式）的樹狀表示。 DOM 的設計使得前端函式庫和框架 (javascript) 可以透過其 API 以程式設計方式與文件互動和操作文件。

為什麼選擇虛擬 DOM

雖然 DOM 提供了一種透過其 API 操作文件的有效方法，但當螢幕上有數千個元素時，效能可能會成為一個問題。這是因為 DOM 中的更新通常涉及銷毀和重新建立整個子樹。

這就是虛擬 DOM 發揮作用的地方。虛擬 DOM 是真實 DOM 的輕量級記憶體表示，允許快速有效地同步實際 DOM 的變更 - 這個過程稱為協調。

這裡要記住的關鍵事項是：

1. 虛擬 DOM 是 真實 DOM 的輕量級版本，這意味著它不具有真實 DOM 的所有屬性，這使得它的使用效率更高。
2. 虛擬 DOM 存在於記憶體中，允許在將變更套用到真實 DOM 之前進行更快、更有效率的操作。

考慮到這一點，使用 DOM API 的 JavaScript 程式庫建立自己的虛擬 DOM 並操作它。他們僅在必要時更新 Real DOM，即使如此，也只需最少的操作。

React 中如何處理虛擬 DOM？

React JS 是 Facebook 開發的一個用於建立使用者介面的流行函式庫。由於其簡單性，它獲得了廣泛的流行並在許多現代 Web 專案中使用。

與許多其他 JS 前端函式庫一樣，React 使用虛擬 DOM 的概念來有效管理應用程式中的重新渲染和更新。

React 使用比較演算法以及協調技術來最佳化此流程。 （具體來說，ReactDOM 庫 在幕後處理此問題。）

讓我們一步一步分解：

1. React 元件的 render() 函數

   • React 元件的 render() 函數首先使用 JSX 建立 React Element/Virtual DOM。
   • 它包含 Real DOM 對應物的輕量級版本和額外屬性，例如 $$typeof、props，以促進高效比較。

2. 比較演算法

   • 每當更新 React 元件時，就會建立一個新的 Virtual DOM，並開始比較過程。這是一個基於兩個關鍵假設的 O(n) 啟發式演算法。
     1. 不同類型的元素會產生不同的樹。
     2. 關鍵道具可用於追蹤哪些子元素在渲染之間保持一致。

2.1。 比較演算法的步驟

• 當演算法遇到兩種不同類型的 DOM 元素：它將拆除舊的 Virtual DOM，並根據新元素的規範從頭開始創建一個新的。
• 當React遇到相同類型的DOM元素時：它保留舊的DOM對象，只更新更改的屬性。
• 對於 相同類型的 React 元素，React 會保持舊 DOM 物件完整併提供更新的 props。
• 處理子元素時，React 會迭代兩組子元素（舊的虛擬 DOM 樹和新建立的樹），在存在差異的地方進行更新。

2.2。 為什麼要使用鑰匙？

如上一點所述，比較演算法會迭代子列表並在必要時進行更改。如果您不使用子清單中的按鍵，效能可能會受到影響，並且您可能會遇到意外的行為。

讓我們來看看範例：

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

在上述場景中，演算法實際上可以有效地處理修改。它查看每個索引子項目並找到

apple

&

菠蘿

兩個列表中的內容相同，並且對它們沒有任何作用，而

grape

僅出現在新清單中，因此將一個新增至舊清單。

但是，我們想加入

葡萄

一開始。

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

這裡，當演算法看到

葡萄

時，其效能將會下降。取代

蘋果

，

蘋果

取代

鳳梨

和一個新的

鳳梨

在最後一個位置。從而重新建立 strach 中的所有元素。

為了解決這個效能瓶頸，React 團隊使用了Key，它是附加到列表子項的唯一ID，演算法可以使用它來確定該項目是否可以完好無損，並且只需重新排序位置或需要重新建立。

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

現在，React 可以使用 Key 屬性，並且在新增子項目時僅重新定位未更新的子項。

3) ReactDOM 的 render() 函數

最後呼叫 ReactDOM 的 render() 函數，它協調了新的 Virtual DOM 和 Real DOM 之間的差異。這使得有效地重新渲染 HTML 所需的操作最少。

結論

在本文中，我們探索了虛擬 DOM，這是許多前端函式庫使用的一種技術，可以透過最少的 DOM 操作有效地處理資料和元素變更。我們也研究了 React 如何具體使用差異和協調流程來優化更新。

我希望這篇文章可以幫助您更了解虛擬 DOM 的工作原理。即使您熟悉這個概念，我也希望現在您知道什麼是 Virtual DOM 以及它如何有助於創建優化的前端環境。

以上是虛擬 DOM：React 快速 DOM 更新背後的技術。的詳細內容。更多資訊請關注PHP中文網其他相關文章！