diff --git a/libs/horizon/src/renderer/diff/nodeDiffComparator.ts b/libs/horizon/src/renderer/diff/nodeDiffComparator.ts index 9334116f..183e6dd9 100644 --- a/libs/horizon/src/renderer/diff/nodeDiffComparator.ts +++ b/libs/horizon/src/renderer/diff/nodeDiffComparator.ts @@ -55,7 +55,7 @@ function deleteVNodes(parentVNode: VNode, startDelVNode: VNode | null, endVNode? } } -function checkCanReuseNode(oldNode: VNode | null, newChild: any): boolean { +function checkCanReuseNode(oldNode: VNode | null, newChild: any, newNodeIdx: number): boolean { if (newChild === null) { return false; } @@ -70,7 +70,12 @@ function checkCanReuseNode(oldNode: VNode | null, newChild: any): boolean { return oldKey === null; } if (newChild.vtype === TYPE_COMMON_ELEMENT || newChild.vtype === TYPE_PORTAL) { - return oldKey === newChild.key; + if(oldKey || newChild.key) { + return oldKey === newChild.key; + } else { + // 新旧节点的index应该相同才能复用,null会影响位置 + return oldNode?.eIndex === newNodeIdx; + } } } @@ -254,7 +259,7 @@ function diffArrayNodesHandler( nextOldNode = oldNode.next; } - canBeReuse = checkCanReuseNode(oldNode, newChildren[leftIdx]); + canBeReuse = checkCanReuseNode(oldNode, newChildren[leftIdx], leftIdx); // 不能复用,break if (!canBeReuse) { oldNode = oldNode ?? nextOldNode; @@ -294,9 +299,8 @@ function diffArrayNodesHandler( if (rightOldIndex < 0 || rightOldNode === null) { break; } - // 新旧节点的index应该相同才能复用,null会影响位置 - const samePosition = rightOldNode.eIndex === rightIdx - 1; - canBeReuse = checkCanReuseNode(rightOldNode, newChildren[rightIdx - 1]) && samePosition; + + canBeReuse = checkCanReuseNode(rightOldNode, newChildren[rightIdx - 1], rightIdx - 1); // 不能复用,break if (!canBeReuse) { break;