diff --git a/src/diff/children.js b/src/diff/children.js index 68b8f27f89..9d76aa7d36 100644 --- a/src/diff/children.js +++ b/src/diff/children.js @@ -69,15 +69,19 @@ export function diffChildren( let newChildrenLength = renderResult.length; + let newChildren = new Array(newChildrenLength); + newParentVNode._children = newChildren; + oldDom = constructNewChildrenArray( newParentVNode, + newChildren, renderResult, oldChildren, oldDom ); for (i = 0; i < newChildrenLength; i++) { - childVNode = newParentVNode._children[i]; + childVNode = newChildren[i]; if (childVNode == null) continue; // At this point, constructNewChildrenArray has assigned _index to be the @@ -144,11 +148,13 @@ export function diffChildren( /** * @param {VNode} newParentVNode + * @param {VNode[]} newChildren * @param {ComponentChildren[]} renderResult * @param {VNode[]} oldChildren */ function constructNewChildrenArray( newParentVNode, + newChildren, renderResult, oldChildren, oldDom @@ -166,7 +172,6 @@ function constructNewChildrenArray( let skew = 0; - newParentVNode._children = new Array(newChildrenLength); for (i = 0; i < newChildrenLength; i++) { // @ts-expect-error We are reusing the childVNode variable to hold both the // pre and post normalized childVNode @@ -177,7 +182,7 @@ function constructNewChildrenArray( typeof childVNode == 'boolean' || typeof childVNode == 'function' ) { - childVNode = newParentVNode._children[i] = null; + newChildren[i] = null; continue; } // If this newVNode is being reused (e.g.
{reuse}{reuse}
) in the same diff, @@ -190,7 +195,7 @@ function constructNewChildrenArray( typeof childVNode == 'bigint' || childVNode.constructor == String ) { - childVNode = newParentVNode._children[i] = createVNode( + childVNode = newChildren[i] = createVNode( null, childVNode, null, @@ -198,7 +203,7 @@ function constructNewChildrenArray( null ); } else if (isArray(childVNode)) { - childVNode = newParentVNode._children[i] = createVNode( + childVNode = newChildren[i] = createVNode( Fragment, { children: childVNode }, null, @@ -210,7 +215,7 @@ function constructNewChildrenArray( // scenario: // const reuse =
//
{reuse}{reuse}
- childVNode = newParentVNode._children[i] = createVNode( + childVNode = newChildren[i] = createVNode( childVNode.type, childVNode.props, childVNode.key, @@ -218,7 +223,7 @@ function constructNewChildrenArray( childVNode._original ); } else { - childVNode = newParentVNode._children[i] = childVNode; + childVNode = newChildren[i] = childVNode; } const skewedIndex = i + skew;