调试不带 key 的列表渲染

let patch = init([])

let vnode = h('ul', [ h('li', '首页'), h('li', '视频'), h('li', '微博') ])
let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

vnode = h('ul', [ h('li', '首页'), h('li', '微博'), h('li', '视频') ])
patch(oldVnode, vnode)

patch(app, vnode)

进入 patch 方法，由于 app 不是 vnode，所以要将这个 dom 元素转换成 vnode，即 oldVnode 为：

{ "sel": "div#app", "data": {},"children": [],"elm": {} }

传入的 vnode 为：

{ "sel": "ul", "data": {}, 
  "children": [
        { "sel": "li", "data": {}, "text": "首页" },
        { "sel": "li", "data": {}, "text": "视频" },
        { "sel": "li", "data": {}, "text": "微博" }
    ]
}

通过 sameVnode 根据 key 和 sel 判断 vnode 和 oldVnode 是否是相同节点，这里 oldVnode 和 vnode 的 key 都是 undefined，但是他们的 sel 不同，所以不是相同节点：

1. 找到 oldVnode.elm 的父节点 parent
2. 调用 createElm 生成 vnode 对应的 dom 元素，并设置为 vnode.elm
3. 将 vnode.elm 插入到 parent 上
4. 移除 oldVnode.elm

patch(oldVnode, vnode)

传入的 oldvnode 是：

{
    "sel": "ul", "data": {},
    "children": [
        { "sel": "li", "data": {}, "text": "首页", "elm": {} },
        { "sel": "li", "data": {}, "text": "视频", "elm": {} },
        { "sel": "li", "data": {}, "text": "微博", "elm": {} }
    ],
    "elm": {<ul><li>首页</li><li>视频</li><li>微博</li></ul>...}
}

传入的 vnode 为：

{
    "sel": "ul", "data": {},
    "children": [
        { "sel": "li", "data": {}, "text": "首页" },
        { "sel": "li", "data": {}, "text": "微博" },
        { "sel": "li", "data": {}, "text": "视频" }
    ]
}

oldVnode 和 vnode 会被认为是 sameVnode，会调用 patchVnode 进行更新和比较。

patchVnode

1. 将 oldVnode.elm 赋值给 vnode.elm 和 elm
2. 获取 oldVnode 的子元素 oldCh 和 vnode 的子元素 ch
3. oldCh 和 ch 不相等，所以会执行 updateChildren(elm, oldCh, ch,...)

updateChildren

进入 updateChildren 后就会使用 diff 算法进行比较，遍历 oldCh 和 ch 直到其中一个数组循环结束。

1. oldCh 中的第一个 li 和 ch 中的第一个 li 是 sameVnode

{ "sel": "li", "data": {}, "text": "首页", "elm": {...} }

再次调用 patchVnode 比较更新这两个 li 元素，但由于这两个 li 的 text 都是 ‘首页’，所以不会进行 DOM 操作。

2. 将新旧子节点的索引都向后++，使得开始节点都指向第 2 个 li 节点
3. 开始比较第 2 个节点，分别是：

{ "sel": "li", "data": {}, "text": "视频", elm": {...} }  // old
{ "sel": "li", "data": {}, "text": "微博" }   // new

根据 key 和 sel 判断，他们依旧是 sameVnode，所以继续调用 patchVnode 进行比较更新。此时，新节点的 text 和旧节点的 text 不同，所以要将新节点的 text 设置到 elm 上修改 DOM，界面在此时发生改变。

4. 将新旧子节点的索引都向后++，使得开始节点都指向第 3 个 li 节点
5. 第 3 个节点的比较过程和第 2 个节点一样，也是更新 elm 的 text

调试带 key 的列表渲染

let patch = init([])

let vnode = h('ul', [h('li', { key: 'a' }, '首页'),h('li', { key: 'b' }, '视频'),h('li', { key: 'c' }, '微博')])
let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

vnode = h('ul', [h('li', { key: 'a' }, '首页'),h('li', { key: 'c' }, '微博'),h('li', { key: 'b' }, '视频')])
patch(oldVnode, vnode)

开始的执行过程和上个案例一致，直到在 updateChildren 中比较第 2 个元素开始，因为设置了 key 值使 DOM 的更新有了变化。

1. 开始比较第 2 个节点，分别是：

{ "key": "b", "sel": "li", "data": {}, "text": "视频", elm": {...} }  // oldStartVnode
{ "key": "c", "sel": "li", "data": {}, "text": "微博" }   // newStartVnode

由于 key 不相同，所以他们不是 sameVnode 了，那么就要进入下一个分支。
2. 比较新旧子节点的结束节点，分别是：

{ "key": "c", "sel": "li", "text": "微博", "elm": {...} }  // oldEndVnode
{ "key": "b", "sel": "li", "data": {}, "text": "视频" }   // newEndVnode

也不是 sameVnode 了，继续进入下一个分支。
3. 比较旧子节点的开始节点和新子节点的结束节点，分别是：

{ "key": "b", "sel": "li", "data": {}, "text": "视频", elm": {...} }  // oldStartVnode
{ "key": "b", "sel": "li", "data": {}, "text": "视频" }   // newEndVnode

他们是 sameVnode，可以调用 patchVnode 进行比较更新。在 patchVnode 中，由于新旧节点的 text 都是 ‘视频’，所以是无需进行 DOM 操作的。但是调用 patchVnode 之后，我们需要执行：

api.insertBefore(parentElm, oldStartVnode.elm!, api.nextSibling(oldEndVnode.elm!))

将旧子节点的开始节点对应的 DOM 元素移动到父元素的最后。

最后将旧的开始索引 ++ ，使得旧子节点的开始节点指向 key:c 的 vnode。新的结束节点 –，使得新子节点的结束节点指向 key:c 的 vnode。

4. 比较第 3 个节点，都是 key:c 的 vnode，无需再操作 DOM

总结

是否设置 key 还是会对渲染的过程和性能造成影响的，但是什么时候设置 key，还是要根据具体情况。

原文链接：https://juejin.cn/post/7346221317736710144 作者：pheony