patch的实现
// patch.js
/**
* 对比新老节点, 并且将老节点的值和属性, 都替换成为新节点的属性和值
* @param {Object} oldVnode 旧的虚拟节点
* @param {Object} newVnode 新的虚拟节点
*/
function patch(oldVnode, newVnode) {
// 1. 新老节点的类型不太一样, 新节点直接替换老的节点
if (oldVnode.type !== newVnode.type) {
return oldVnode.domElement.parentNode.replaceChild(
createDomElementFromVnode(newVnode),
oldVnode.domElement
)
}
// 1. 类型相同且是文本类型, hello-world
if (oldVnode.text) {
if (newVnode.text === oldVnode.text) {
return;
}
return oldVnode.domElement.textContent = newVnode.text;
}
// 2. 类型一样, 且是标签类型, 需要根据新节点的属性 来更新节点的属性
// 距离: h('div'. { id: '1', style: { color: red } }, 'text') => h('div', { name: 2, title: 3 }, 'hello world')
const domElement = newVnode.domElement = oldVnode.domElement;
// 将新节点的属性和老属性进行对比, 进行属性的挂载和删除
updateProperties(newVnode, oldVnode.props); // (根据最新的节点来更新属性)
// 3. 比较children节点
const oldChildren = oldVnode.children || [];
const newChildren = newVnode.children || [];
// 3.1 老节点存在 children节点, 新的也有children节点
if (oldChildren.length && newChildren.length) {
// 对比儿子节点
updateChildren(domElement, oldChildren, newChildren);
}
// 3.2 老节点存在children节点, 新的节点不存在
else if (oldChildren.length) {
domElement.innerHTML = '';
} else if (newChildren.length) {
for (let i = 0; i < newChildren.length; i += 1) {
const realChildDomElement = createDomElementFromVnode(newChildren[i]); // 将虚拟节点变成真实的dom节点
domElement.appendChild(realChildDomElement);
}
}
// 3.3 老节点不存在children节点, 但是新的节点存在children节点
}
/**
* 比较两个虚拟节点的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;
}
/**
* 对比新旧子节点, 并在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. 正序倒序
// 旧节点 头部指针
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];
// 1. 判断 oldChildren和newChildren 循环的时候, 谁先结束就停止循环
while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
// 判断是否是同一个节点, 从头部开始比较
if (isSameVnode(oldStartVnode, newStartVnode)) {
// 主要是做属性更新的操作和子文本节点
patch(oldStartVnode, newStartVnode);
oldStartIndex += 1;
newStartIndex += 1;
oldStartVnode = oldChildren[oldStartIndex];
newStartVnode = newChildren[newStartIndex];
} else if (isSameVnode(oldEndVnode, newEndVnode)) { // 如果头部不相同, 从尾部开始比较
patch(oldEndVnode, newEndVnode);
oldEndIndex -= 1;
newEndIndex -= 1;
oldEndVnode = oldChildren[oldEndIndex];
newEndVnode = newChildren[newEndIndex];
}
}
// 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
);
}
}
// 3. 表示头部有新节点, 需要追加在头部
}
调用
import { h, patch, render } from './vdom/index';
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")
);
// 渲染 render: 将虚拟节点转换成为真实的dom节点, 最后插入到app元素中
render(list1, document.getElementById("app"));
setTimeout(() => {
// 比对新老节点
patch(list1, list2);
}, 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'
}
]
}
*/
网友评论