12.1 渲染组件

const MyComponent = {
  name: 'MyComponent',   // 组件名称，可选
  render() {
    // 返回虚拟 DOM
    return { type: 'div', children: '我是文本内容' }
  }
}

// 用来描述组件的 VNode，type 属性值为组件选项对象
const CompVNode = { type: MyComponent }

renderer.render(CompVNode, document.querySelector('#app'))

function patch(n1, n2, container, anchor) {
  // ...
  if (typeof type === 'string') {
    // 普通标签元素
  } else if (type === Text) {
    // 文本节点
  } else if (type === Comment) {
    // 注释节点
  } else if (type === Fragment) {
    // 片段
  } else if (typeof type === 'object') {
    // n2.type 是对象 → 描述的是组件
    if (!n1) {
      mountComponent(n2, container, anchor)   // 挂载组件
    } else {
      patchComponent(n1, n2, container)       // 更新组件（本节尚未实现）
    }
  }
}

function mountComponent(vnode, container, anchor) {
  // vnode.type 就是组件的选项对象
  const componentOptions = vnode.type
  const { render } = componentOptions
  // 执行渲染函数，取得组件要渲染的内容，即子树 subTree
  const subTree = render()
  // 组件渲染的内容仍是普通虚拟 DOM，交给 patch 继续处理
  patch(null, subTree, container, anchor)
}