#93 Virtual DOM

大家都知道,React、Vue 内部都采用了 Virtual DOM 的技术。简而言之,就是用普通的 JavaScript 对象来表示 DOM 的结构和信息。例如下面的 DOM 结构:

<ul id='list' style='color: red'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

可以用 JavaScript 的对象表示为:

const ul = {
  tagName: 'ul', // 节点标签名
  props: { // DOM的属性,用一个对象存储键值对
    id: 'list',
    style: 'color: red'
  },
  children: [ // 该节点的子节点
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

每个代表 DOM 节点的对象有三个属性:

  1. tagName:代表 DOM 节点的标签名。
  2. props:这个 DOM 节点的属性,用一个对象表示。
  3. children:这个 DOM 节点的子节点,是一个数组;数组的元素可以是 字符串 或者 对象。如果是字符串就表示这个子节点是文本节点,否则就表示是另外一个 DOM 节点。

请你完成 h 函数,可以通过 h 函数生成上面的结果,例如:

const ul = h('ul', {id: 'list', style: 'color: red'}, [
  h('li', {class: 'item'}, ['Item 1']),
  h('li', {class: 'item'}, ['Item 2']),
  h('li', {class: 'item'}, ['Item 3'])
])

ul.props.id === 'list' // => true

h 函数需要返回的实例是属于 VNode 这个类的:

ul instanceof VNode // => true

请你完成 h 函数和 VNode 的实现。


JavaScript
登录提交答案

与 的连接断开,我们正在尝试重连,请耐心等待