tempo优化系列: 从0开始(渲染)

首先把渲染的架子搭出来
我们假设有一个组件

class MyComponent {
  render() {
    return {
      tag: 'div'
    }
  }
}

组件的产出一定是vnode

const vnode = {
  tag: MyComponent
}

这里把vnode渲染成真实DOM，我这里用render 函数，render函数的参数是vnode和挂在元素

render(vnode, document.getElementById('app'))

接下来实现render
render函数现在有两种情况需要渲染，一种以组件，一种是一般标签

function render (vnode, container) {
  if (typeof vnode.tag === 'string') {
    // html标签
    mountElement(vnode, container);
  } else {
    // 组件
    mountComponent(vnode, container)
  }
}

// 一般标签
function mountElement (vnode, container) {
  const el = document.createElement(vnode.tag)  
  container.appendChild(el);
}
// 组件
function mountComponent(vnode, container) {
  // 创建组件实例
  const instance = new vnode.tag()
  // 渲染
  instance.$vnode = instance.render()
  // 挂载
  mountElement(instance.$vnode, container);
}

代码：
https://github.com/TingYinHelen/tempo-optimization