feat: use item key as beforeMap key in diffArrayLepus

Author: gaoachao

packages/react/runtime/src/backgroundSnapshot.ts

@@ -471,6 +471,8 @@ export function hydrate(
             (a, b) => {
               helper(a, b);
             },
+            // Should be `false` in hydrate as SerializedSnapshotInstance has no item-key
+            false,
           );
           diffArrayAction(
             beforeChildNodes,

packages/react/runtime/src/hydrate.ts

@@ -5,10 +5,13 @@
 import { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
 import { __pendingListUpdates } from './pendingListUpdates.js';
 import { DynamicPartType } from './snapshot/dynamicPartType.js';
+import type { PlatformInfo } from './snapshot/platformInfo.js';
 import { unref } from './snapshot/ref.js';
 import type { SnapshotInstance } from './snapshot.js';
 import { isEmptyObject } from './utils.js';
 
+const UNREACHABLE_ITEM_KEY_NOT_FOUND = 'UNREACHABLE_ITEM_KEY_NOT_FOUND';
+
 export interface DiffResult<K> {
   $$diff: true;
   // insert No.j to new
@@ -21,6 +24,7 @@ export interface DiffResult<K> {
 
 export interface Typed {
   type: string;
+  __listItemPlatformInfo?: PlatformInfo;
 }
 
 export function isEmptyDiffResult<K>(diffResult: DiffResult<K>): boolean {
@@ -34,6 +38,7 @@ export function diffArrayLepus<A extends Typed, B extends Typed>(
   after: B[],
   isSameType: (a: A, b: B) => boolean,
   onDiffChildren: (a: A, b: B, oldIndex: number, newIndex: number) => void,
+  isListChildren: boolean,
 ): DiffResult<B> {
   let lastPlacedIndex = 0;
   const result: DiffResult<B> = {
@@ -46,12 +51,18 @@ export function diffArrayLepus<A extends Typed, B extends Typed>(
 
   for (let i = 0; i < before.length; i++) {
     const node = before[i]!;
-    (beforeMap[node.type] ??= new Set()).add([node, i]);
+    const key = isListChildren
+      ? node.__listItemPlatformInfo?.['item-key'] ?? UNREACHABLE_ITEM_KEY_NOT_FOUND
+      : node.type;
+    (beforeMap[key] ??= new Set()).add([node, i]);
   }
 
   for (let i = 0; i < after.length; i++) {
     const afterNode = after[i]!;
-    const beforeNodes = beforeMap[afterNode.type];
+    const key = isListChildren
+      ? afterNode.__listItemPlatformInfo?.['item-key'] ?? UNREACHABLE_ITEM_KEY_NOT_FOUND
+      : afterNode.type;
+    const beforeNodes = beforeMap[key];
     let beforeNode: [A, number];
 
     if (
@@ -258,6 +269,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
           (a, b) => {
             hydrate(a, b, options);
           },
+          false,
         );
         diffArrayAction(
           beforeChildNodes,
@@ -341,6 +353,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
               }
             }
           },
+          true,
         );
 
         for (const i of diffResult.r) {