第七章-渲染器的设计

渲染器 （ renderer ）的作用是把虚拟 DOM 渲染为特定平台上的真实元素。在浏览器平台上，渲染器会把虚拟 DOM 渲染成真实 DOM 元素。
虚拟DOM用英文表示为 virtual DOM ,通常简写为 vdom 或者 vnode 。
渲染器把虚拟DOM节点渲染为真实DOM节点的过程叫做挂载，通常用英文mount来表示。例如Vue.js组件中的 mounted 钩子就会在挂在完成时触发。这就意味着，在mounted钩子中可以访问真实DOM元素。
渲染器通常需要接收一个挂载点作为参数，用来指定具体挂载地址。这里的“挂载点”其实就是一个DOM元素，渲染器会把这个 DOM 元素作为容器节点，将内容渲染到容器下。用英文container来表达容器。

function createRenderer(){
  function render(vnode , container){
    //....
  }
  return {
    render
  }
}

有了渲染器我们就可以用它来进行渲染了

const renderer = createRenderer()
 //首次渲染
 renderer.render(vnode,document.querySelector('#app'))
 //第二次次渲染
 renderer.render(newVnode,document.querySelector('#app'))

如果在同一个container内进行多次渲染，因为旧的vnode已经挂载在container中了，当再次进行渲染时就不能简单进行挂载动作了。在这种情况下渲染器会比较两个vnode,试图找到跟更新变更点。这个过程叫做打补丁（或更新），英文用 patch 表达。实际上挂载动作也可以看作是一种 patch ，只是它的旧vnode不存在。
加入patch之后代码如下：

 function createRenderer(){
  function render(vnode,container){
    if(vnode){
      //如果vnode存在，将其与旧vnode一起传递给patch,进行打补丁
      patch(container._vnode,vnode,container)
    }else{
      //如果不存在，说明是卸载操作
      container.innerHTML = ""
    }
    //保存vnode为旧vnode
    container._vnode = vnode
    //...
  }
  return {
    render
  }
 }