3.3 组件的本质

// 函数式组件：函数返回虚拟 DOM
const MyComponent = function () {
  return {
    tag: 'div',
    props: { onClick: () => alert('hello') },
    children: 'MyComponent click me'
  }
}

// 对象式组件：对象 + render 方法
const MyComponent1 = {
  render() {
    return {
      tag: 'div',
      props: { onClick: () => alert('hello 1') },
      children: 'MyComponent1 click me'
    }
  }
}

const vnode = {
  tag: MyComponent1 // 不是字符串，而是组件
}

function renderer(vnode, container) {
  if (typeof vnode.tag === 'string') {
    mountElement(vnode, container)      // vnode 描述的是标签元素
  } else if (typeof vnode.tag === 'function') {
    mountComponent(vnode, container)    // vnode 描述的是组件
  } else if (typeof vnode.tag === 'object') {
    mountComponent(vnode, container)    // vnode 描述的是组件
  }
}

// 渲染标签元素：与 3.2 的最简实现一致
function mountElement(vnode, container) {
  const el = document.createElement(vnode.tag)

  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key])
    }
  }

  if (typeof vnode.children === 'string') {
    el.appendChild(document.createTextNode(vnode.children))
  } else if (Array.isArray(vnode.children)) {
    vnode.children.forEach(child => renderer(child, el))
  }

  container.appendChild(el)
}

// 渲染组件：先拿到子树，再交给渲染器递归处理
function mountComponent(vnode, container) {
  let subtree
  if (typeof vnode.tag === 'object') {
    subtree = vnode.tag.render() // 对象式组件
  } else {
    subtree = vnode.tag()        // 函数式组件
  }
  renderer(subtree, container)   // 递归渲染组件返回的虚拟 DOM
}