《Vue.js 设计与实现》读书笔记 - 第11章、快速 Diff 算法
第11章、快速 Diff 算法
11.1 相同的前置元素和后置元素
快速 Diff 算法包含预处理步骤，这借鉴了纯文本 Diff 算法的思路。
先把相同的前缀后缀进行处理，然后再比较中间部分。
function patchKeyedChildren(n1, n2, container) {
const oldChildren = n1.children
const newChildren = n2.children
let j = 0
let oldVNode = oldChildren[j]
let newVNode = newChildren[j]
while (oldVNode.key === newVNode.key) {
patch(oldVNode, newVNode, container)
j++
oldVNode = oldChildren[j]
newVNode = newChildren[j]
}
let oldEnd = oldChildren.length - 1
let newEnd = newChildren.length - 1
oldVNode = oldChildren[oldEnd]
newVNode = newChildren[newEnd]
while (oldVNode.key === newVNode.key) {
patch(oldVNode, newVNode, container)
oldEnd--
newEnd--
oldVNode = oldChildren[oldEnd]
newVNode = newChildren[newEnd]
}
}
如果旧节点都被处理完了，新节点还有剩余，证明这些都是新增的，需要依次挂载。而如果是旧节点有剩余，则需要全部卸载。
if (j > oldEnd && j <= newEnd) {
const anchorIndex = oldEnd + 1
const anchor = oldChildren[anchorIndex]
? oldChildren[anchorIndex].el
: null
while (j <= newEnd) {
patch(null, newChildren[j++], container, anchor)
}
} else if (j > newEnd && j <= oldEnd) {
while (j <= oldEnd) {
unmount(oldChildren[j++])
}
}
11.2 判断是否需要进行 DOM 移动操作
如果前缀后缀处理完之后，并没有任何一组节点被处理完，则需要进行移动操作。我们根据 key 判断相同节点，然后找到每一个新节点在旧节点中的位置，我们把这个数组存为 source。
function patchKeyedChildren(n1, n2, container) {
// ...
if (j > oldEnd && j <= newEnd) {
// ...
} else if (j > newEnd && j <= oldEnd) {
// ...
} else {
const count = newEnd - j + 1 // 新节点剩余的数量
const source = new Array(count)
source.fill(-1) // 初始值全部设为 -1
const oldStart = j
const newStart = j
for (let i = oldStart; i <= oldEnd; i++) {
const oldVNode = oldChildren[i]
for (let k = newStart; k <= newEnd; k++) {
const newVNode = newChildren[k]
if (oldVNode.key === newVNode.key) {
patch(oldVNode, newVNode, container)
source[k - newStart] = i
}
}
}
}
}
为了在后面操作中快速找到相同 key 的节点（而不是每次都需要遍历）可以使用 Map 存储 key 对应的节点位置。而对于找不到对于 key 的节点，则需要卸载。
const count = newEnd - j + 1 // 新节点剩余的数量
const source = new Array(count)
source.fill(-1) // 初始值全部设为 -1
const oldStart = j
const newStart = j
// 对新数组构建 key->index 索引表
const keyIndex = {}
for (let i = newStart; i <= newEnd; i++) {
keyIndex[newChildren[i].key] = i
}
for (let i = oldStart; i <= oldEnd; i++) {
const oldVNode = oldChildren[i]
const k = keyIndex[oldVNode.key]
if (typeof k !== 'undefined') {
const newVNode = newChildren[k]
patch(oldVNode, newVNode, container)
source[k - newStart] = i
} else {
unmount(oldVNode)
}
}
然后我们使用第九章类似的思路来判断是否有节点需要移动。同时记录 patch 过的节点数量，当 patch 过的元素等于新节点的数量，剩下的节点直接卸载。
const count = newEnd - j + 1 // 新节点剩余的数量
const source = new Array(count)
source.fill(-1) // 初始值全部设为 -1
const oldStart = j
const newStart = j
let moved = false
let pos = 0
// 对新数组构建 key->index 索引表
const keyIndex = {}
for (let i = newStart; i <= newEnd; i++) {
keyIndex[newChildren[i].key] = i
}
let patched = 0
for (let i = oldStart; i <= oldEnd; i++) {
const oldVNode = oldChildren[i]
if (patched <= count) {
const k = keyIndex[oldVNode.key]
if (typeof k !== 'undefined') {
const newVNode = newChildren[k]
patch(oldVNode, newVNode, container)
patched++
source[k - newStart] = i
if (k < pos) {
moved = true
} else {
pos = k
}
} else {
unmount(oldVNode)
}
} else {
// 如果更新过的节点数量已经大于新的节点数量 说明剩下的节点都需要被卸载
unmount(oldVNode)
}
}
11.3 如何移动元素
我们上面通过 moved = true 标识了需要移动，下面该考虑如何移动。
我们先计算 source 的最长递增子序列。这部分不是重点，折叠了，但是我加了下注释。应该是力扣原题~
点击查看代码
function getSequence(arr) {
const p = arr.slice()
const result = [0]
let i, j, u, v, c
const len = arr.length
for (i = 0; i < len; i++) {
const arrI = arr[i]
if (arrI !== 0) {
j = result[result.length - 1]
if (arr[j] < arrI) {
p[i] = j
result.push(i)
continue
}
u = 0
v = result.length - 1
// 二分找到第一个大于arrI的位置
// u最小值 v最大值
while (u < v) {
c = ((u + v) / 2) | 0 // 取中间值
if (arr[result[c]] < arrI) {
u = c + 1
} else {
v = c
}
}
if (arrI < arr[result[u]]) {
if (u > 0) {
// 3 4 1
// 我们开始会存储 3 4 <0,1>
// 然后会存为 1 4 <2,1>
// 但是要知道 4 在 1 之前 不可以这样构造子序列
// 所以用p记录：一个下标被放入result时 它的前一个位置是哪个下标
p[i] = result[u - 1]
}
result[u] = i
}
}
}
u = result.length
v = result[u - 1]
while (u-- > 0) {
result[u] = v
v = p[v]
}
return result
}
console.log(getSequence([1, 2, 3])) // [ 0, 1, 2 ]
console.log(getSequence([3, 4, 1])) // [ 0, 1 ]
console.log(getSequence([3, 2, 1])) // [ 2 ]
我们通过 getSequence 计算出最长递增子序列对应的下标数组。对于最长递增子序列中包含的下标对应的节点，不进行移动，对其他节点进行移动。
方法就是从子节点数组和 lis 数组的最后一个节点作比较，如果子节点的下标等于 lis 的值，就不移动节点，同时下标向前移动，否则移动节点。
if (moved) {
const seq = lis(source)
let s = seq.length - 1
for (let i = count - 1; i >= 0; i--) {
if (source[i] === -1) {
// 新节点
const pos = i + newStart
const newVNode = newChildren[pos]
const nextPos = pos + 1
const anchor =
nextPos < newChildren.length ? newChildren[nextPos].el : null
patch(null, newVNode, container, anchor)
}
if (i !== seq[s]) {
// 移动
const pos = i + newStart
const newVNode = newChildren[pos]
const nextPos = pos + 1
const anchor =
nextPos < newChildren.length ? newChildren[nextPos].el : null
insert(newVNode.el, container, anchor)
} else {
s--
}
}
} else {
for (let i = count - 1; i >= 0; i--) {
if (source[i] === -1) {
// 新节点
const pos = i + newStart
const newVNode = newChildren[pos]
const nextPos = pos + 1
const anchor =
nextPos < newChildren.length ? newChildren[nextPos].el : null
patch(null, newVNode, container, anchor)
}
}
}
P.S.书上没有写 moved=false 相关逻辑，我看了下还是应该写的。
