初探Virtual dom & diff算法

问：
Virtual dom 是什么？为何会存在Virtual dom?
答：
用JS模拟DOM结构。起因：
1.DOM操作是昂贵的，将DOM比照放在JS层，JS运行效率高
2.需要尽量减少DOM操作

我们通过个小例子来看什么是用JS模拟DOM结构：

<ul id=‘list’>    <li class=‘item’>Item 1 </li>    <li class=‘item’>Item 2 </li></ul>====>通过某种方法将上面的html代码转为js对象{    tag: ‘ul’,    attires: {id: ‘list’},    children: [        {            tag: ‘li’,            attires: {className: ‘item’},            children: [‘Item1']        },        {            tag: ‘li’,            attires: {className: ‘item’},            children: [‘Item2']        },    ]}

问：
vdom如何使用，核心函数是什么？
答：
snabbdom是virtual dom的一种实现库，附上github地址 snabbdom/snabbdom

核心API

• h(‘<标签名>’, {…属性…}, […子元素…])
• h(‘<标签名>’, {…属性…}, ‘…’)
• patch(container, vnode) =》 将vnode渲染在页面上 首次渲染
• patch(vnode, newVnode) => rerender update

h函数可以生成vnode节点，这块跟react解析jsx（React.createElement方法）很像，都是生成vnode。h函数的传参，第一个参数是标签名。第二个是此标签上的属性，比方style, class, 事件等。第三个是children，假如标签下面没有子元素只有显示文字的话只要传字符串即可以了，但假如有子元素的话还需要第三个参数传入子元素的vnode同样使用h函数生成。
而patch函数有两种，一个是在首次渲染时调用，传参分别是container元素和生成的vnode。第二种是在页面升级时re-render时调用，传参分别是旧的vnode和生成的新的newVnode。

具体看以下的代码例子：

// 构建一个虚拟节点，h函数做的事情可以了解为上面所转化的js对象var vnode = h(‘ul#list’, {}, [        h(‘li.item’, {}, ‘Item1’),        h(‘li.item’, {}, ‘Item2’),    ])// 真实构建一个containervar container = document.getElementById(‘container’)// 把vnode渲染进空的container容器中patch(container, vnode)// 模拟点击button改变值var btnChange = document.getElementById(‘btn-change’)btnChange.addEventListener(‘click’, function(){    // 构建新的虚拟节点，数字不一样    var newVnode = h(‘ul#list’, {}, [        h(‘li.item’, {}, ‘Item1’),        h(‘li.item’, {}, ‘ItemB’),        h(‘li.item’, {}, ‘Item3’),    ])    // 将旧的节点和新的节点传入patch函数，patch会diff算法计算实际改变的地方并只渲染dom改动点    patch(vnode, newVnode)})

问：
详情一下diff算法
答：

• diff算法是linux的基础命令
• vdom中应用diff算法是为了找出需要升级的节点
• 实现：patch(container, vnode)和patch(vnode, newVnode)
• 核心逻辑：createElement和updateChildren

我们来看patch(container, vnode) 的核心逻辑代码（简写）：

function createElement(vnode) {    var tag = vnode.tag    var attires = vnode.attrs || {}    var children = vnode.children || []    if (!tag) {        return null    }    // 创立元素    var elem = document.createElement(tag)    // 属性    var attrName    for (attrName in attrs) {        if(attrs.hasOwnProperty(attrName)) {            elem.setAttribute(attrName, attrs[attrName])        }    }    //子元素    children.forEach(function(childVnode) {        // 递归调用 createElement 创立子元素        elem.appendChild(createElement(childVnode))    })    return elem}

再来看patch(vnode, newVnode)的核心逻辑代码，同样是简写。。

function updateChildren(vnode, newVnode){    var children = vnode.children || []    var newChildren = newVnode.children || []    // 遍历现有的children    children.forEach(function(child, index){        var newChild = newChildren[index]        if(newChild == null){            return        }        if(child.tag === newChild.tag){            //两者tag一样            updateChildren(child, newChild)        } else {            replaceNode(child, newChild)        }    })}

PS: diff算法需要考虑的地方

• 节点新添加和删除
• 节点重新排序
• 节点属性，样式，事件绑定
• 如何极致压榨性能