初探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地址https://github.com/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’),
    ])

// 真实构建一个container
var 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算法需要考虑的地方

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