yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Match-id-93516717c91c5e50211d023e098455978ca8a2c4

This commit is contained in:
* 2022-04-15 11:17:30 +08:00 committed by *
parent 6952e69988
commit 49fac0e85f
1 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
libs/horizon/src/renderer/diff/nodeDiffComparator.ts
View File

@ -96,11 +96,8 @@ function getNodeType(newChild: any): string | null {
} }
// 设置vNode的flag // 设置vNode的flag
function setVNodeAdditionFlag(newNode: VNode, lastPosition: number, isComparing: boolean): number { function setVNodeAdditionFlag(newNode: VNode, lastPosition: number): number {
let position = lastPosition; let position = lastPosition;
if (!isComparing) {
return position;
}
if (newNode.isCreated || newNode.eIndex < lastPosition) { // 位置 小于 上一个复用的位置 if (newNode.isCreated || newNode.eIndex < lastPosition) { // 位置 小于 上一个复用的位置
// 标记为新增 // 标记为新增
@ -221,7 +218,6 @@ function diffArrayNodesHandler(
parentNode: VNode, parentNode: VNode,
firstChild: VNode | null, firstChild: VNode | null,
newChildren: Array<any>, newChildren: Array<any>,
isComparing: boolean
): VNode | null { ): VNode | null {
let resultingFirstChild: VNode | null = null; let resultingFirstChild: VNode | null = null;
@ -273,11 +269,11 @@ function diffArrayNodesHandler(
} }
// diff过程中，需要将现有的节点清除掉，如果是创建，则不需要处理（因为没有现存节点） // diff过程中，需要将现有的节点清除掉，如果是创建，则不需要处理（因为没有现存节点）
if (isComparing && oldNode && newNode.isCreated) { if (oldNode && newNode.isCreated) {
deleteVNode(parentNode, oldNode); deleteVNode(parentNode, oldNode);
} }
theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition, isComparing); theLastPosition = setVNodeAdditionFlag(newNode, theLastPosition);
newNode.eIndex = leftIdx; newNode.eIndex = leftIdx;
appendNode(newNode); appendNode(newNode);
oldNode = nextOldNode; oldNode = nextOldNode;
@ -319,11 +315,11 @@ function diffArrayNodesHandler(
rightNewNode = newNode; rightNewNode = newNode;
} }
if (isComparing && rightOldNode && newNode.isCreated) { if (rightOldNode && newNode.isCreated) {
deleteVNode(parentNode, rightOldNode); deleteVNode(parentNode, rightOldNode);
} }
setVNodeAdditionFlag(newNode, theLastPosition, isComparing); setVNodeAdditionFlag(newNode, theLastPosition);
newNode.eIndex = rightIdx - 1; newNode.eIndex = rightIdx - 1;
rightOldIndex--; rightOldIndex--;
rightEndOldNode = rightOldNode; rightEndOldNode = rightOldNode;
@ -332,13 +328,11 @@ function diffArrayNodesHandler(
// 3. 新节点已经处理完成 // 3. 新节点已经处理完成
if (leftIdx === rightIdx) { if (leftIdx === rightIdx) {
if (isComparing) { if (firstChild && parentNode.tag === DomComponent && newChildren.length === 0) {
if (firstChild && parentNode.tag === DomComponent && newChildren.length === 0) { FlagUtils.markClear(parentNode);
FlagUtils.markClear(parentNode); parentNode.clearChild = firstChild;
parentNode.clearChild = firstChild; } else {
} else { deleteVNodes(parentNode, oldNode, rightEndOldNode);
deleteVNodes(parentNode, oldNode, rightEndOldNode);
}
} }
if (rightNewNode) { if (rightNewNode) {
@ -364,7 +358,9 @@ function diffArrayNodesHandler(
newNode = getNewNode(parentNode, newChildren[leftIdx], null); newNode = getNewNode(parentNode, newChildren[leftIdx], null);
if (newNode !== null) { if (newNode !== null) {
if (isComparing) { if (parentNode.tag === DomPortal) {
FlagUtils.setAddition(newNode);
} else if (!parentNode.isCreated) {
FlagUtils.setAddition(newNode); FlagUtils.setAddition(newNode);
} }
if (isDirectAdd) { if (isDirectAdd) {
@ -398,42 +394,39 @@ function diffArrayNodesHandler(
oldNodeFromMap = getOldNodeFromMap(leftChildrenMap, leftIdx, newChildren[leftIdx]); oldNodeFromMap = getOldNodeFromMap(leftChildrenMap, leftIdx, newChildren[leftIdx]);
newNode = getNewNode(parentNode, newChildren[leftIdx], oldNodeFromMap); newNode = getNewNode(parentNode, newChildren[leftIdx], oldNodeFromMap);
if (newNode !== null) { if (newNode !== null) {
if (isComparing && !newNode.isCreated) {
// 从Map删除，后面不会deleteVNode
leftChildrenMap.delete(newNode.key || leftIdx);
}
if (newNode.isCreated) { if (newNode.isCreated) {
// 新VNode，直接打上标签新增，不参与到复用，旧的VNode会在后面打上delete标签
FlagUtils.setAddition(newNode); FlagUtils.setAddition(newNode);
} else if (oldNodeFromMap !== null) { } else {
const eIndex = newNode.eIndex; // 从Map删除，后面不会deleteVNode，就可以实现复用
eIndexes.push(eIndex); leftChildrenMap.delete(newNode.key || leftIdx);
last = eIndexes[result[result.length - 1]]; if (oldNodeFromMap !== null) {
if (eIndex > last || last === undefined) { // 大的 eIndex直接放在最后 const eIndex = newNode.eIndex;
preIndex[i] = result[result.length - 1]; eIndexes.push(eIndex);
result.push(i); last = eIndexes[result[result.length - 1]];
} else { if (eIndex > last || last === undefined) { // 大的 eIndex直接放在最后
let start = 0; preIndex[i] = result[result.length - 1];
let end = result.length - 1; result.push(i);
let middle; } else {
// 二分法找到需要替换的值 let start = 0;
while (start < end) { let end = result.length - 1;
middle = Math.floor((start + end) / 2); let middle;
if (eIndexes[result[middle]] > eIndex) { // 二分法找到需要替换的值
end = middle; while (start < end) {
} else { middle = Math.floor((start + end) / 2);
start = middle + 1; if (eIndexes[result[middle]] > eIndex) {
end = middle;
} else {
start = middle + 1;
}
}
if (eIndex < eIndexes[result[start]]) {
preIndex[i] = result[start - 1];
result[start] = i;
} }
} }
if (eIndex < eIndexes[result[start]]) { i++;
preIndex[i] = result[start - 1]; reuseNodes.push(newNode); // 记录所有复用的节点
result[start] = i;
}
}
i++;
reuseNodes.push(newNode); // 记录所有复用的节点
} else {
if (isComparing) {
FlagUtils.setAddition(newNode); // 新增节点直接打上add标签
} }
} }
newNode.eIndex = leftIdx; newNode.eIndex = leftIdx;
@ -441,28 +434,26 @@ function diffArrayNodesHandler(
} }
} }
if (isComparing) { // 向前回溯找到正确的结果
// 向前回溯找到正确的结果 let length = result.length;
let length = result.length; let prev = result[length - 1];
let prev = result[length - 1]; while (length-- > 0) {
while (length-- > 0) { result[length] = prev;
result[length] = prev; prev = preIndex[result[length]];
prev = preIndex[result[length]];
}
result.forEach(idx => {
// 把需要复用的节点从 restNodes 中清理掉，因为不需要打 add 标记，直接复用 dom 节点
reuseNodes[idx] = null;
});
reuseNodes.forEach(node => {
if (node !== null) {
// 没有被清理的节点打上 add 标记，通过dom的append操作实现位置移动
FlagUtils.setAddition(node);
}
});
leftChildrenMap.forEach(child => {
deleteVNode(parentNode, child);
});
} }
result.forEach(idx => {
// 把需要复用的节点从 restNodes 中清理掉，因为不需要打 add 标记，直接复用 dom 节点
reuseNodes[idx] = null;
});
reuseNodes.forEach(node => {
if (node !== null) {
// 没有被清理的节点打上 add 标记，通过dom的append操作实现位置移动
FlagUtils.setAddition(node);
}
});
leftChildrenMap.forEach(child => {
deleteVNode(parentNode, child);
});
if (rightNewNode) { if (rightNewNode) {
appendNode(rightNewNode); appendNode(rightNewNode);
@ -490,7 +481,6 @@ function diffIteratorNodesHandler(
parentNode: VNode, parentNode: VNode,
firstChild: VNode | null, firstChild: VNode | null,
newChildrenIterable: Iterable<any>, newChildrenIterable: Iterable<any>,
isComparing: boolean
): VNode | null { ): VNode | null {
const iteratorFn = getIteratorFn(newChildrenIterable); const iteratorFn = getIteratorFn(newChildrenIterable);
const iteratorObj = iteratorFn.call(newChildrenIterable); const iteratorObj = iteratorFn.call(newChildrenIterable);
@ -503,7 +493,7 @@ function diffIteratorNodesHandler(
result = iteratorObj.next(); result = iteratorObj.next();
} }
return diffArrayNodesHandler(parentNode, firstChild, childrenArray, isComparing); return diffArrayNodesHandler(parentNode, firstChild, childrenArray);
} }
// 新节点是字符串类型 // 新节点是字符串类型
@ -644,12 +634,12 @@ export function createChildrenByDiff(
// 3. newChild是数组类型 // 3. newChild是数组类型
if (Array.isArray(newChild)) { if (Array.isArray(newChild)) {
return diffArrayNodesHandler(parentNode, firstChild, newChild, isComparing); return diffArrayNodesHandler(parentNode, firstChild, newChild);
} }
// 4. newChild是迭代器类型 // 4. newChild是迭代器类型
if (isIteratorType(newChild)) { if (isIteratorType(newChild)) {
return diffIteratorNodesHandler(parentNode, firstChild, newChild, isComparing); return diffIteratorNodesHandler(parentNode, firstChild, newChild);
} }
// 5. newChild是对象类型 // 5. newChild是对象类型