问：
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算法需要考虑的地方
- 节点新增和删除
- 节点重新排序
- 节点属性，样式，事件绑定
- 如何极致压榨性能
