??

)? ??? '??'???. ?? DOM ??? ??? ?? ? ??? ???? ?? ?????.

?:

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

"Hello, world!".

???? ?? ??

?? ???:

• ? ???? ??(?: div, p)? ????.
• props(id, class ?)? ?? ? ????.
• ?? ??? ???? ? ? ?? ?? ??? ????.

---

2??: ?? DOM? ?? DOM?? ???

?? ?? DOM? ???? ?? ???? ?? HTML? ??? ? ?? ??? ?????.

?? DOM ??? ??? ?? HTML ??? ???? render?? ??? ??? ?????.

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, ??? ?? ?? ??? ?????.
• ? ?? ??? ???? ????? ?? ???? ???? ?? ??(??? ?? ?? ??)? ?????.

---

3??: ?? ?? DOM? ? ?? DOM ??(??)

? ??? ??? ????(?: ???? ??? ???) ??? ?? DOM? ????. ??? ?? DOM? ?????? ?? ?? ?? DOM? ? ?? DOM? ???? ??? ?????? ???? ???. ?? '??'?? ???.

? ?? DOM? ???? ??? ??? ?????.

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

?? ?? ??:

• ?? ?? ??: ?? ??? ????(?:
  ?

  ? ??) ?? ???? ?????.

• ??? ??: ?? ???? ???? ???? ???????.
• ?? ? ??: ??? ??(props) ?? ?? ??? ?????? ?????.

---

4??: Real DOM ??

??? ??? ?? ?? ?? ?? ??? ?? DOM? ???? ???. ??? ? ??? ???? ????.

?? ??? ??? ????.

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

?? ??:

• ??: ? ??? ?? ??? ??? ?????.
• ???: ?? ??? ???? ???????.
• ????: ?? ??? ?? ??? ?? ??? ???????.

---

?? DOM ???? ??:

1. ?? DOM ??: ?????? ??? ?? ??? ???? ??? ?? ??? ????.
2. ?? DOM?? ???: ? ?? DOM? ?? HTML ??? ???? ???? ?????.
3. ?? ????: ??? ???? ?? ?? DOM? ? ?? DOM? ???? ???? ????.
4. ?? DOM ??: ??? ?? ???? ???? ?? ??? ?? DOM? ?????.

---

?? ??

Virtual DOM? ?? DOM? ?? ???? ??? ?? ??? ?????? ? ??? ????? ? ?? ??? ?????. Virtual DOM? ?????? ? ?? ??? ?????? ????? ??? ????? ? ??? ??? ??? ??? ??? ? ????.

??? Virtual DOM ??? ?? ????? ?? React? ?? ?????? ?? ??? ????? ??? ? ?? ??? ?????!

? ??? ???? ?? DOM ??: ??? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!