;帶有文本 “你好，世界！”.

要點(diǎn)：

• 每個(gè)節(jié)點(diǎn)都有一個(gè)類(lèi)型（例如 div、p）。
• 它可以有 props（如 id、class 等）。
• 它還有可以是其他元素或文本的子元素。

第二步：將虛擬 DOM 渲染到真實(shí) DOM

現(xiàn)在我們有了虛擬 DOM，我們需要一種方法將其轉(zhuǎn)換為頁(yè)面上的真實(shí) HTML。

讓我們編寫(xiě)一個(gè)名為 render 的函數(shù)，它接收虛擬 DOM 節(jié)點(diǎn)并將其轉(zhuǎn)換為實(shí)際的 HTML 元素。

function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

這里發(fā)生了什么？

• 我們創(chuàng)建一個(gè)元素 (document.createElement(vNode.type))。
• 我們添加任何屬性（如 id、class 等）。
• 我們通過(guò)添加文本或在每個(gè)子元素上再次調(diào)用渲染來(lái)處理子元素（文本或其他元素）。

第 3 步：比較（差異）新舊虛擬 DOM

當(dāng)我們的網(wǎng)絡(luò)應(yīng)用程序發(fā)生某些變化（例如文本或元素的樣式）時(shí)，我們會(huì)創(chuàng)建一個(gè)新的虛擬 DOM。但在更新真實(shí) DOM 之前，我們需要比較舊 Virtual DOM 和 新 Virtual DOM 來(lái)找出發(fā)生了什么變化。這稱(chēng)為“比較”。

讓我們創(chuàng)建一個(gè)比較兩個(gè)虛擬 DOM 的函數(shù)：

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the <p> tag
    }
  ]
}

差異如何工作：

• 節(jié)點(diǎn)類(lèi)型更改：如果元素類(lèi)型發(fā)生更改（例如將
  更改為

  ），我們會(huì)將其標(biāo)記為替換。

• 文本更改：如果內(nèi)部文本發(fā)生更改，我們會(huì)更新文本。
• 屬性和子元素：我們檢查元素的任何屬性（props）或子元素是否已更改。

---

第 4 步：修補(bǔ)真實(shí) DOM

一旦我們知道發(fā)生了什么變化，我們就需要將這些更改應(yīng)用到真實(shí)的 DOM 上。我們將此過(guò)程稱(chēng)為修補(bǔ)。

修補(bǔ)功能的外觀(guān)如下：


function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

關(guān)鍵操作：

• 替換： 將一個(gè)元素完全替換為另一個(gè)元素。
• 文本：更新元素內(nèi)的文本。
• 更新：根據(jù)更改更新屬性和子項(xiàng)。

---

虛擬 DOM 流程總結(jié)：

1. 虛擬 DOM 樹(shù)： 我們創(chuàng)建一個(gè)樹(shù)狀結(jié)構(gòu)，表示網(wǎng)頁(yè)上的元素及其層次結(jié)構(gòu)。
2. 渲染為真實(shí) DOM： 此虛擬 DOM 被轉(zhuǎn)換為真實(shí)的 HTML 元素并放置在頁(yè)面上。
3. 比較算法：當(dāng)發(fā)生變化時(shí)，我們將舊的 Virtual DOM 與新的進(jìn)行比較以找出差異。
4. 修補(bǔ)真實(shí) DOM： 以最有效的方式將這些更改應(yīng)用到真實(shí) DOM。

---

最后的想法

虛擬 DOM 是一個(gè)強(qiáng)大的工具，它通過(guò)減少對(duì)真實(shí) DOM 的不必要的更改來(lái)更快地更新用戶(hù)界面。通過(guò)實(shí)現(xiàn)虛擬 DOM，我們可以?xún)?yōu)化 Web 應(yīng)用程序更新和渲染元素的方式，從而帶來(lái)更快、更流暢的用戶(hù)體驗(yàn)。

這是虛擬 DOM 概念的基本實(shí)現(xiàn)，但您現(xiàn)在已經(jīng)有了理解 React 等框架如何使用它的基礎(chǔ)！