3.2 初识渲染器

const vnode = {
  tag: 'div',                    // 标签名称
  props: {
    onClick: () => alert('hello')
  },
  children: 'click me'           // 子节点
}

function renderer(vnode, container) {
  // 1. 使用 vnode.tag 作为标签名称创建 DOM 元素
  const el = document.createElement(vnode.tag)

  // 2. 遍历 vnode.props，将属性、事件添加到 DOM 元素
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      // 以 on 开头即为事件，如 onClick
      el.addEventListener(
        key.substr(2).toLowerCase(), // 事件名称 onClick -> click
        vnode.props[key]             // 事件处理函数
      )
    }
  }

  // 3. 处理 children
  if (typeof vnode.children === 'string') {
    // 字符串 → 文本子节点
    el.appendChild(document.createTextNode(vnode.children))
  } else if (Array.isArray(vnode.children)) {
    // 数组 → 递归渲染子节点，以当前元素 el 作为挂载点
    vnode.children.forEach(child => renderer(child, el))
  }

  // 4. 将元素添加到挂载点下
  container.appendChild(el)
}

renderer(vnode, document.body) // body 作为挂载点