虚拟DOM

数据对象
虚拟DOM可以理解为我们根据页面的真实的DOM结构抽象出来的一种数据结构，一个层级比较复杂的对象，和真实的DOM一一映射。我们可以通过调用一个渲染函数比如render，将数据对象作为参数传入，便可得到一个真实的能在页面显示的DOM。

diff算法
DOM的更新依赖于数据的改变。我们并不希望由于数据的改变而需要整个DOM结构的重新渲染。
借助diff算法，通过对比前后虚拟DOM的差异，进行有针对性的打补丁渲染。算法并不简单，因为考虑很多种情况，自行脑补。其中需要用到递归，父子节点判断的轮回。

// 使用ES6语法定义一个VNode类，通过new VNode()可生成一个虚拟DOM对象
class VNode {
  constructor(tag, children, text) {
    this.tag = tag
    this.text = text
    this.children = children
  }

  render() {
    if(this.tag === '#text') {
      return document.createTextNode(this.text)
    }
    let el = document.createElement(this.tag)
    this.children.forEach(vChild => {
      el.appendChild(vChild.render())
    })
    return el
  }
}
//v函数多加了点额外情况考虑，主要逻辑依旧是构造函数VNode
function v(tag, children, text) {
  if(typeof children === 'string') {
    text = children
    children = []
  }
  return new VNode(tag, children, text)
}

比较前后虚拟DOM差异

// 简化版，实际远复杂的多
function patchElement(parent, newVNode, oldVNode, index = 0) {
  if(!oldVNode) {
    parent.appendChild(newVNode.render())
  } else if(!newVNode) {
    parent.removeChild(parent.childNodes[index])
  } else if(newVNode.tag !== oldVNode.tag || newVNode.text !== oldVNode.text) {
    parent.replaceChild(newVNode.render(), parent.childNodes[index])
  }  else {
    for(let i = 0; i < newVNode.children.length || i < oldVNode.children.length; i++) {
      patchElement(parent.childNodes[index], newVNode.children[i], oldVNode.children[i], i)
    }
  }
}

let vNodes1 = v('div', [
      v('p', [
        v('span', [ v('#text', 'xiedaimala.com') ] )
        ]
      ),
      v('span', [
        v('#text',  'jirengu.com')
        ])
    ]
  )

let vNodes2 = v('div', [
      v('p', [
        v('span', [ 
          v('#text', 'xiedaimala.com') 
          ] )
        ]
      ),
      v('span', [
        v('#text',  'jirengu.coms'),
        v('#text',  'ruoyu')
        ])
    ]
  )
const root = document.querySelector('#root')
patchElement(root, vNodes1)