only diff 1 item (#7)

Author: zombieJ

src/List.tsx

@@ -184,7 +184,12 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
       // Should trigger `onSkipRender` to tell that diff component is not render in the list
       if (data.length > prevData.length) {
         const { startIndex, endIndex } = this.state;
-        if (onSkipRender && (changedItemIndex < startIndex || endIndex < changedItemIndex)) {
+        if (
+          onSkipRender &&
+          (changedItemIndex === null ||
+            changedItemIndex < startIndex ||
+            endIndex < changedItemIndex)
+        ) {
           onSkipRender();
         }
       }
@@ -263,7 +268,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
           this.lockScroll = false;
         });
       });
-    } else if (prevData.length !== data.length && height) {
+    } else if (prevData.length !== data.length && changedItemIndex !== null && height) {
       /**
        * Re-calculate the item position since `data` length changed.
        * [IMPORTANT] We use relative position calculate here.

src/utils/algorithmUtil.ts

@@ -41,42 +41,44 @@ export function findListDiffIndex<T>(
   targetList: T[],
   getKey: (item: T) => string,
 ): number | null {
-  if (originList.length === targetList.length) {
+  const originLen = originList.length;
+  const targetLen = targetList.length;
+
+  // Skip if more than 1 content is diff
+  if (Math.abs(originLen - targetLen) !== 1) {
     return null;
   }
 
-  let startIndex = 0;
-  let endIndex = Math.max(originList.length, targetList.length) - 1;
-  let midIndex = Math.floor((startIndex + endIndex) / 2);
+  let shortList: T[];
+  let longList: T[];
 
-  const keyCache: Map<T, string | { __EMPTY_ITEM__: true }> = new Map();
+  if (originLen < targetLen) {
+    shortList = originList;
+    longList = targetList;
+  } else {
+    shortList = targetList;
+    longList = originList;
+  }
 
-  function getCacheKey(item: T) {
-    if (!keyCache.has(item)) {
-      keyCache.set(item, item !== undefined ? getKey(item) : { __EMPTY_ITEM__: true });
+  const notExistKey = { __EMPTY_ITEM__: true };
+  function getItemKey(item: T) {
+    if (item) {
+      return getKey(item);
     }
-    return keyCache.get(item);
+    return notExistKey;
   }
 
-  while (startIndex !== midIndex || midIndex !== endIndex) {
-    const originMidKey = getCacheKey(originList[midIndex]);
-    const targetMidKey = getCacheKey(targetList[midIndex]);
+  // Loop to find diff one
+  let diffIndex = 0;
+  for (let i = 0; i < longList.length; i += 1) {
+    const shortKey = getItemKey(shortList[i]);
+    const longKey = getItemKey(longList[i]);
 
-    if (originMidKey === targetMidKey) {
-      startIndex = midIndex;
-    } else {
-      endIndex = midIndex;
+    if (shortKey !== longKey) {
+      diffIndex = shortKey === getItemKey(longList[i + 1]) ? i : null;
+      break;
     }
-
-    // Check if there only 2 index left
-    if (startIndex === endIndex - 1) {
-      return getCacheKey(originList[startIndex]) !== getCacheKey(targetList[startIndex])
-        ? startIndex
-        : endIndex;
-    }
-
-    midIndex = Math.floor((startIndex + endIndex) / 2);
   }
 
-  return midIndex;
+  return diffIndex;
 }

tests/util.test.js

@@ -86,10 +86,20 @@ describe('Util', () => {
       it('small list', () => {
         expect(findListDiffIndex([0], [], num => num)).toEqual(0);
         expect(findListDiffIndex([0, 1], [0], num => num)).toEqual(1);
-        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual(1);
+        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual(null);
         expect(findListDiffIndex([], [0], num => num)).toEqual(0);
         expect(findListDiffIndex([0], [0, 1], num => num)).toEqual(1);
       });
+
+      it('diff only 1', () => {
+        expect(findListDiffIndex([0, 1, 2], [], num => num)).toEqual(null);
+        expect(findListDiffIndex([0, 1, 2], [1, 2], num => num)).toEqual(0);
+        expect(findListDiffIndex([0, 1, 2], [0, 2], num => num)).toEqual(1);
+        expect(findListDiffIndex([0, 1, 2], [0, 1], num => num)).toEqual(2);
+        expect(findListDiffIndex([0, 1, 2], [0], num => num)).toEqual(null);
+        expect(findListDiffIndex([0, 1, 2], [1], num => num)).toEqual(null);
+        expect(findListDiffIndex([0, 1, 2], [2], num => num)).toEqual(null);
+      });
     });
   });
 });