113. Virtual DOM I

すでに 110. 二分木の直列化と復元を解けたでしょうか。DOM treeに対して同じことはできるとお気づきになりましたか？

HTMLはある意味での 直列化→ブラウザはHTMLを解釈(復元）し→ DOM treeを構築する。

XML baseの他、JSONも行ける。Reactでのelementをこうログすれば：

const el = <div>
 <h1> this is </h1>
 <p className="paragraph"> a <button> button </button> from <a href="https://bfe.dev"><b>BFE</b>.dev</a>
 </p>
</div>;

console.log(el)

以下のobject literalが得られる( refとkeyなど重要じゃない情は除かれる）

{
  type: 'div',
  props: {
    children: [
      {
        type: 'h1',
        props: {
          children: ' this is '
        }
      },
      {
        type: 'p',
        props: {
          className: 'paragraph',
          children: [
            ' a ',
            {
              type: 'button',
              props: {
                children: ' button '
              }
            },
            ' from',
            {
              type: 'a',
              props: {
                href: 'https://bfe.dev',
                children: [
                  {
                    type: 'b',
                    props: {
                      children: 'BFE'
                    }
                  },
                  '.dev'
                ]
              }
            }
          ]
        }
      }
    ]
  }
}

一目瞭然で、これはtreeですね、ただobject literalで表記しているだけ。

では、DOM treeと直列化と復元をやってください, Reactみたいに。

補足

Event HandlerやCustom Componentなどfunctionを利用する場面は無視し、基本的なHTML タグだけ考慮すれば良い。

こちらはサポートしてください。

1. TextNode (string) as children
2. single child and multiple children
3. camelCased properties.

virtualize() はDOM treeを受け， object literalを返す。

render()はobject literalを受け、DOM treeを返す。