、

など) はツリー內(nèi)の「ノード」です。 仮想 DOM ノード は、これらの要素の 1 つを表す小さなオブジェクトです。

これが例です:

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
    }
  ]
}

これは

について説明します。 id="container" の要素。これには

が含まれます。 「Hello, world!」. というテキストを含む要素

重要なポイント:

• 各ノードにはタイプがあります (例: div、p)。
• 小道具 (ID、クラスなど) を含めることができます。
• 他の要素またはテキストである可能性のある子もあります。

---

ステップ 2: 仮想 DOM を?qū)g際の DOM にレンダリングする

仮想 DOM を作成したので、それをページ上の実際の HTML に変換する方法が必要です。

仮想 DOM ノードを受け取り、それを?qū)g際の HTML 要素に変換する render という関數(shù)を書いてみましょう。

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.
}

ここで何が起こるのでしょうか？

• 要素 (document.createElement(vNode.type)) を作成します。
• 任意の屬性 (ID、クラスなど) を追加します。
• テキストを追加するか、各子要素で render を再度呼び出すことによって、子 (テキストまたはその他の要素) を処理します。

---

ステップ 3: 新舊の仮想 DOM を比較 (差分)

Web アプリで何かが変更されると (テキストや要素のスタイルなど)、新しい仮想 DOM が作成されます。ただし、実際の DOM を更新する前に、古い仮想 DOM と 新しい仮想 DOM を比較して、何が変更されたかを把握する必要があります。これは「差分」と呼ばれます。

2 つの仮想 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
    }
  ]
}

差分の仕組み:

• ノード タイプの変更: 要素のタイプが変更された場(chǎng)合 (
  を

  に変更するなど)、置換対象としてマークします。

• テキストの変更: 內(nèi)部のテキストが変更された場(chǎng)合は、テキストを更新します。
• 屬性と子: 要素の屬性 (小道具) または子が変更されているかどうかを確認(rèn)します。

---

ステップ 4: 実際の DOM にパッチを適用する

何が変更されたのかがわかったら、それらの変更を?qū)g際の DOM に適用する必要があります。このプロセスをパッチ適用と呼びます。

パッチ機(jī)能は次のようになります:

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.
}





  
  
  キー操作:




REPLACE: ある要素を別の要素で完全に置き換えます。

TEXT: 要素內(nèi)のテキストを更新します。

更新: 変更に基づいて屬性と子を更新します。






  
  
  仮想 DOM プロセスの概要:




仮想 DOM ツリー: Web ページ上の要素とその階層を表すツリーのような構(gòu)造を作成します。

リアル DOM へのレンダリング: この仮想 DOM は実際の HTML 要素に変換され、ページに配置されます。

差分アルゴリズム: 何かが変更されると、古い仮想 DOM と新しい仮想 DOM を比較して違いを見つけます。

実際の DOM にパッチを適用します: 可能な限り最も効率的な方法で、これらの変更を?qū)g際の DOM に適用します。






  
  
  最終的な考え


仮想 DOM は、実際の DOM への不必要な変更を減らすことで、ユーザー インターフェイスの更新を高速化する強(qiáng)力なツールです。仮想 DOM を?qū)g裝することで、Web アプリが要素を更新およびレンダリングする方法を最適化し、より高速でスムーズなユーザー エクスペリエンスを?qū)g現(xiàn)できます。

これは Virtual DOM 概念の基本的な実裝ですが、React などのフレームワークがそれをどのように利用するかを理解するための基礎(chǔ)ができました!


          

以上が仮想 DOM を最初から設(shè)計(jì)する: ステップバイステップ ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。