patch.js
// patch.js 几种对比方案
/**
* 比较两个虚拟节点的key和type是否相同
* @param {Vnode} oldVnode 旧节点
* @param {Vnode} newVnode 新节点
* @returns {boolean} 返回两个节点的key和type是否都是一致
*/
function isSameVnode(oldVnode, newVnode) {
return oldVnode.key === newVnode.key && oldVnode.type === newVnode.type;
}
// 需要一个方法, 做成一个映射表: { a: 0, b: 1, c: 2, d: 3 }
/**
* 将节点的key和索引做成一个映射表
* @param {Array<vnode>} oldChildren 节点数组
* @returns {Map} 返回节点键值和索引的映射map
*/
function createMapByKeyToIndex(oldChildren) {
const map = {};
for (let i = 0; i < oldChildren.length; i += 1) {
const current = oldChildren[i];
if (current.key) {
map[current.key] = i;
}
}
return map;
}
/**
* 对比新旧子节点, 并在parent真实节点中进行替换
* @param {HTMLElement} parent 父真实节点
* @param {Array<vnode>} oldChildren 旧的children虚拟节点
* @param {Array<vnode>} newChildren 新的children虚拟节点
*/
function updateChildren(parent, oldChildren, newChildren) {
// 最复杂的就是列表
/**
h('div', {},
h('li', { style: { color: "red" }, key: 'A' }, 'A'),
h('li', { style: { color: "yellow" }, key: 'B' }, 'B'),
h('li', { style: { color: "blue" }, key: 'C' }, 'C'),
h('li', { style: { color: "green" }, key: 'D' }, 'D')
)
=> 更新后
h('div', {},
h('li', { style: { color: "yellow" }, key: 'A', id: 'a1' }, 'A1'),
h('li', { style: { color: "blue" }, key: 'B' }, 'B1'),
h('li', { style: { color: "green" }, key: 'C' }, 'C1'),
h('li', { style: { color: "red" }, key: 'D' }, 'D1'),
h('li', { style: { color: "orange" }, key: 'E' }, 'E1')
)
**/
// 对常见的dom 操作做优化
// 1. 前后, 追加 push, unshift
// 2. 正序倒序
// 3. 表示头部有新节点, 需要追加在头部
// 4. 暴力对比, 节点复用
// 旧节点 头部指针
let oldStartIndex = 0;
// 旧节点 头部节点
let oldStartVnode = oldChildren[oldStartIndex];
// 旧节点 尾部指针
let oldEndIndex = oldChildren.length - 1;
// 旧节点 尾部节点
let oldEndVnode = oldChildren[oldEndIndex];
// 旧节点 头部指针
let newStartIndex = 0;
// 旧节点 头部节点
let newStartVnode = newChildren[newStartIndex];
// 旧节点 尾部指针
let newEndIndex = newChildren.length - 1;
// 旧节点 尾部节点
let newEndVnode = newChildren[newEndIndex];
// 旧节点的键值和索引映射对象
const oldChildrenKeyIndexMap = createMapByKeyToIndex(oldChildren);
// 1. 判断 oldChildren和newChildren 循环的时候, 谁先结束就停止循环
while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
// 表示节点被移除之后, 如果为undefined, 直接跳过该节点
if (!oldStartVnode) {
oldStartVnode = oldChildren[++newStartIndex];
} else if (!oldEndVnode) {
oldEndVnode = oldChildren[--oldEndIndex];
}
// 判断是否是同一个节点, 从头部开始比较
else if (isSameVnode(oldStartVnode, newStartVnode)) {
patch(oldStartVnode, newStartVnode); // 主要是做属性更新的操作和子文本节点
oldStartIndex += 1;
newStartIndex += 1;
oldStartVnode = oldChildren[oldStartIndex];
newStartVnode = newChildren[newStartIndex];
} else if (isSameVnode(oldEndVnode, newEndVnode)) {
// 如果头部不相同, 从尾部开始比较
// A B C D
// D C B A
patch(oldEndVnode, newEndVnode);
oldEndIndex -= 1;
newEndIndex -= 1;
oldEndVnode = oldChildren[oldEndIndex];
newEndVnode = newChildren[newEndIndex];
} else if (isSameVnode(oldStartVnode, newEndVnode)) {
// 如果老的头部和新的尾部是相同的节点
// A B C D
// B C D A
patch(oldStartVnode, newEndVnode);
parent.insertBefore(
oldStartVnode.domElement,
oldEndVnode.domElement.nextSiblings
);
oldStartIndex += 1;
oldStartVnode = oldChildren[oldStartIndex];
newEndIndex -= 1;
newEndVnode = newChildren[newEndIndex];
} else if (isSameVnode(oldEndVnode, newStartVnode)) {
// 旧的尾部节点和新的头部节点相等
// A B C D
// D A B C
patch(oldEndVnode, newStartVnode);
parent.insertBefore(oldEndVnode.domElement, oldStartVnode.domElement); // 将老节点插入到了最前面
oldEndIndex -= 1;
oldEndVnode = oldChildren[oldEndIndex];
newStartIndex += 1;
newStartVnode = newChildren[newStartIndex];
} else {
// 暴力对比 (尽量可能的节点复用)
// A B C D
// G C A E F
// 需要先拿到新的节点, 去老的节点中查找, 看是否存在, 如果存在就复用, 如果不存在就创建插入复用即可
const index = oldChildrenKeyIndexMap[newStartVnode.key];
if (index == null) {
// 在新的对列中, 将当前旧节点插入到指定位置 (比如上面的G节点, 在旧节点数组中不存在, 那么就需要再旧节点数组中插入)
parent.insertBefore(
createDomElementFromVnode(newStartVnode),
oldStartVnode.domElement
);
} else {
// 表示节点在oldChildren存在, 此时需要复用 (比如上面的C节点, 需要将C节点移动到A节点的前面)
const toMoveNode = oldChildren[index];
// 需要移动的节点和新数组的开始节点比较
patch(toMoveNode, newStartVnode);
parent.insertBefore(toMoveNode.domElement, oldStartVnode.domElement);
// 移动完成之后, 需要清除该节点
oldChildren[index] = undefined;
}
newStartIndex += 1;
newStartVnode = newChildren[newStartIndex];
} // end 暴力对比
}
// 2. 表示有新的节点, 需要追加在尾部
if (newStartIndex <= newEndIndex) {
for (let i = newStartIndex; i <= newEndIndex; i += 1) {
// const appendElement = createDomElementFromVnode(newChildren[i]);
// parent.appendChild(appendElement);
// 头部插入时: newEndIndex表示当前新节点中 [A,B,C,D] => [E,F,A,B,C,D]
// A,B,C,D
// F,A,B,C,D
// newEndIndex代表的是 新节点中A的索引为1, newStartIndex此时仍然为0
const beforeVnode = newChildren[newEndIndex + 1];
const beforeElement = null;
if (!beforeVnode) {
// 表示是尾部追加
} else {
// 表示是头部追加
beforeElement = beforeVnode.domElement;
}
// 主要考虑的是 头部比较和尾部比较的添加问题
parent.insertBefore(
createDomElementFromVnode(newChildren[i]),
beforeElement
);
}
}
// 表示需要清除孩子节点
// A B C D
// G C A E F
// G C A E F B D 需要删除尾部的BD节点
if (oldStartIndex <= oldEndIndex) {
for (let i = oldStartIndex; i <= oldEndIndex; i += 1) {
if (oldChildren[i]) {
parent.removeChild(oldChildren[i].domElement);
}
}
}
}
测试
// 1. 先实现虚拟dom, 主要就是一个对象, 来表述dom节点, jsx
// createElement, h
import { h, patch, render } from './vdom/index';
/*
const vnode = h(
"div",
{
key: "keyCode",
id: "container",
},
h("span", { style: { color: "red" } }, "hello"),
"dom diff"
);
*/
const list1 = h('ul',
{},
h('li', { style: { color: "red" }, key: 'A' }, 'A'),
h('li', { style: { color: "yellow" }, key: 'B' }, 'B'),
h('li', { style: { color: "blue" }, key: 'C' }, 'C'),
h('li', { style: { color: "green" }, key: 'D' }, 'D')
);
const list2 = h(
"ul",
{},
// 头部添加数据的时候, 从尾部开始比较
h("li", { style: { color: "orange" }, key: "Z", id: "z1" }, "Z1"),
h("li", { style: { color: "yellow" }, key: "A", id: "a1" }, "A1"),
h("li", { style: { color: "blue" }, key: "B" }, "B1"),
h("li", { style: { color: "green" }, key: "C" }, "C1"),
h("li", { style: { color: "red" }, key: "D" }, "D1")
// 尾部添加数据的时候, 从头部开始比较
// h("li", { style: { color: "orange" }, key: "E" }, "E1")
);
// 暴力diff
// A B C D
// G C A E F
const list3 = h(
"ul",
{},
h("li", { style: { color: "yellow" }, key: "A", id: "a1" }, "A"),
h("li", { style: { color: "blue" }, key: "B" }, "B"),
h("li", { style: { color: "green" }, key: "C" }, "C1"),
h("li", { style: { color: "red" }, key: "D" }, "D1")
);
const list4 = h(
"ul",
{},
h("li", { style: { color: "blue" }, key: "G" }, "G"),
h("li", { style: { color: "green" }, key: "C" }, "C1"),
h("li", { style: { color: "yellow" }, key: "A", id: "a1" }, "A1"),
h("li", { style: { color: "red" }, key: "E" }, "E"),
h("li", { style: { color: "red" }, key: "F" }, "F")
);
// list3 -> list4 => 结果 G C A1 E F
// 渲染 render: 将虚拟节点转换成为真实的dom节点, 最后插入到app元素中
// render(vnode, document.getElementById('app'))
render(list3, document.getElementById("app"));
// render(list1, document.getElementById("app"));
// 来一个新的节点 替换老的节点
// const newVnode = h('h2', {}, 'hello world');
setTimeout(() => {
// 比对新老节点
// patch(list1, list2);
patch(list3, list4);
}, 2000);
// $mount
/**
* <div id="container"><span style="color:red">hello</span>dom diff</div>
h(
'div',
{
key: 'keyCode',
id: 'container'
},
h(
'span',
{ style: { color: 'red' } },
'hello'
),
'dom diff'
)
生成的虚拟节点对象
{
type: 'div',
props: { id: 'container' },
children: [
{
type: 'span',
props: {
style: {
color: red
}
},
children: [],
text: 'hello'
},
{
type: '',
props: {},
children: [],
text: 'dom diff'
}
]
}
*/
/**
用索引作为key的问题
A[checked=true] B C D E => 首部添加F节点
F的key和type与A相同, 会直接复用A节点
F[checked=true] A B C D E
*/
