optimze find diff logic

Author: zombieJ

examples/animate.tsx

@@ -16,7 +16,7 @@ function genItem() {
 }
 
 const originDataSource: Item[] = [];
-for (let i = 0; i < 10000; i += 1) {
+for (let i = 0; i < 100000; i += 1) {
   originDataSource.push(genItem());
 }
 
@@ -116,6 +116,7 @@ const Demo = () => {
     <React.StrictMode>
       <div>
         <h2>Animate</h2>
+        <p>Current: {dataSource.length} records</p>
 
         <List
           dataSource={dataSource}

examples/basic.tsx

@@ -25,7 +25,7 @@ const MyItem: React.FC<Item> = ({ id }, ref) => {
 
 const ForwardMyItem = React.forwardRef(MyItem);
 
-class TestItem extends React.Component {
+class TestItem extends React.Component<{ id: number }> {
   render() {
     return <div style={{ lineHeight: '30px' }}>{this.props.id}</div>;
   }
@@ -68,6 +68,7 @@ const Demo = () => {
           dataSource={dataSource}
           height={200}
           itemHeight={30}
+          itemKey="id"
           style={{
             border: '1px solid red',
             boxSizing: 'border-box',

src/List.tsx

@@ -9,7 +9,8 @@ import {
   GHOST_ITEM_KEY,
   getItemRelativeTop,
   getCompareItemRelativeTop,
-} from './util';
+} from './utils/itemUtil';
+import { getIndexByStartLoc, findListDiffIndex } from './utils/algorithmUtil';
 
 type RenderFunc<T> = (item: T) => React.ReactNode;
 
@@ -20,7 +21,7 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
   dataSource: T[];
   height?: number;
   itemHeight?: number;
-  itemKey?: string;
+  itemKey: string;
   component?: string | React.FC<any> | React.ComponentClass<any>;
 }
 
@@ -112,7 +113,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
 
       // Record here since measure item height will get warning in `render`
       for (let index = startIndex; index <= endIndex; index += 1) {
-        const eleKey = this.getItemKey(index);
+        const eleKey = this.getIndexKey(index);
         this.itemElementHeights[eleKey] = getNodeHeight(this.itemElements[eleKey]);
       }
 
@@ -124,12 +125,12 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
         scrollTop: this.listRef.current.scrollTop,
         scrollPtg: getElementScrollPercentage(this.listRef.current),
         clientHeight: this.listRef.current.clientHeight,
-        getItemKey: this.getItemKey,
+        getItemKey: this.getIndexKey,
       });
 
       let startItemTop = locatedItemTop;
       for (let index = itemIndex - 1; index >= startIndex; index -= 1) {
-        startItemTop -= this.itemElementHeights[this.getItemKey(index)] || 0;
+        startItemTop -= this.itemElementHeights[this.getIndexKey(index)] || 0;
       }
 
       this.setState({ status: 'MEASURE_DONE', startItemTop });
@@ -159,14 +160,15 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
           clientHeight: this.listRef.current.clientHeight,
         }),
         clientHeight: this.listRef.current.clientHeight,
-        getItemKey: (index: number) => this.getItemKey(index, prevProps),
+        getItemKey: (index: number) => this.getIndexKey(index, prevProps),
       });
 
       // 2. Find the compare item
-      const removedItemIndex: number = prevProps.dataSource.findIndex((_, index) => {
-        const key = this.getItemKey(index, prevProps);
-        return dataSource.every((__, nextIndex) => key !== this.getItemKey(nextIndex));
-      });
+      const removedItemIndex: number = findListDiffIndex(
+        prevProps.dataSource,
+        dataSource,
+        this.getItemKey,
+      );
       let originCompareItemIndex = removedItemIndex - 1;
       // Use next one since there are not more item before removed
       if (originCompareItemIndex < 0) {
@@ -180,7 +182,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
         compareItemIndex: originCompareItemIndex,
         startIndex: originStartIndex,
         endIndex: originEndIndex,
-        getItemKey: (index: number) => this.getItemKey(index, prevProps),
+        getItemKey: (index: number) => this.getIndexKey(index, prevProps),
         itemElementHeights: this.itemElementHeights,
       });
 
@@ -195,7 +197,9 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
       const scrollHeight = dataSource.length * itemHeight;
       const { clientHeight } = this.listRef.current;
       const maxScrollTop = scrollHeight - clientHeight;
-      for (let scrollTop = 0; scrollTop < maxScrollTop; scrollTop += 1) {
+      for (let i = 0; i < maxScrollTop; i += 1) {
+        const scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);
+
         const scrollPtg = getScrollPercentage({ scrollTop, scrollHeight, clientHeight });
         const visibleCount = Math.ceil(height / itemHeight);
 
@@ -214,7 +218,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
             itemElementHeights: this.itemElementHeights,
             scrollPtg,
             clientHeight,
-            getItemKey: this.getItemKey,
+            getItemKey: this.getIndexKey,
           });
 
           const compareItemTop = getCompareItemRelativeTop({
@@ -223,7 +227,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
             compareItemIndex: originCompareItemIndex, // Same as origin index
             startIndex,
             endIndex,
-            getItemKey: this.getItemKey,
+            getItemKey: this.getIndexKey,
             itemElementHeights: this.itemElementHeights,
           });
 
@@ -295,8 +299,9 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     });
   };
 
-  public getItemKey = (index: number, props?: ListProps<T>) => {
-    const { dataSource, itemKey } = props || this.props;
+  public getIndexKey = (index: number, props?: ListProps<T>) => {
+    const mergedProps = props || this.props;
+    const { dataSource } = mergedProps;
 
     // Return ghost key as latest index item
     if (index === dataSource.length) {
@@ -307,7 +312,13 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     if (!item) {
       console.error('Not find index item. Please report this since it is a bug.');
     }
-    return item && itemKey ? item[itemKey] : index;
+
+    return this.getItemKey(item, mergedProps);
+  };
+
+  public getItemKey = (item: T, props?: ListProps<T>) => {
+    const { itemKey } = props || this.props;
+    return item ? item[itemKey] : null;
   };
 
   /**
@@ -318,7 +329,7 @@ class List<T> extends React.Component<ListProps<T>, ListState> {
     list.map((item, index) => {
       const node = renderFunc(item) as React.ReactElement;
       const eleIndex = startIndex + index;
-      const eleKey = this.getItemKey(eleIndex);
+      const eleKey = this.getIndexKey(eleIndex);
 
       // Pass `key` and `ref` for internal measure
       return React.cloneElement(node, {

src/utils/algorithmUtil.ts

@@ -0,0 +1,82 @@
+/**
+ * Get index with specific start index one by one. e.g.
+ * min: 3, max: 9, start: 6
+ *
+ * Return index is:
+ * [0]: 6
+ * [1]: 7
+ * [2]: 5
+ * [3]: 8
+ * [4]: 4
+ * [5]: 9
+ * [6]: 3
+ */
+export function getIndexByStartLoc(min: number, max: number, start: number, index: number): number {
+  const beforeCount = start - min;
+  const afterCount = max - start;
+  const balanceCount = Math.min(beforeCount, afterCount) * 2;
+
+  // Balance
+  if (index <= balanceCount) {
+    const stepIndex = Math.floor(index / 2);
+    if (index % 2) {
+      return start + stepIndex + 1;
+    }
+      return start - stepIndex;
+  }
+
+  // One is out of range
+  if (beforeCount > afterCount) {
+    return start - (index - afterCount);
+  }
+  return start + (index - beforeCount);
+}
+
+/**
+ * We assume that 2 list has only 1 item diff and others keeping the order.
+ * So we can use dichotomy algorithm to find changed one.
+ */
+export function findListDiffIndex<T>(
+  originList: T[],
+  targetList: T[],
+  getKey: (item: T) => string,
+): number | null {
+  if (originList.length === targetList.length) {
+    return null;
+  }
+
+  let startIndex = 0;
+  let endIndex = originList.length - 1;
+  let midIndex = Math.floor((startIndex + endIndex) / 2);
+
+  const keyCache: Map<T, string | { __EMPTY_ITEM__: true }> = new Map();
+
+  function getCacheKey(item: T) {
+    if (!keyCache.has(item)) {
+      keyCache.set(item, item !== undefined ? getKey(item) : { __EMPTY_ITEM__: true });
+    }
+    return keyCache.get(item);
+  }
+
+  while (startIndex !== midIndex || midIndex !== endIndex) {
+    const originMidKey = getCacheKey(originList[midIndex]);
+    const targetMidKey = getCacheKey(targetList[midIndex]);
+
+    if (originMidKey === targetMidKey) {
+      startIndex = midIndex;
+    } else {
+      endIndex = midIndex;
+    }
+
+    // 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;
+}

src/util.ts renamed to src/utils/itemUtil.ts

@@ -0,0 +1,42 @@
+import { getIndexByStartLoc, findListDiffIndex } from '../src/utils/algorithmUtil';
+
+describe('Util', () => {
+  describe('getIndexByStartLoc', () => {
+    function test(name, min, max, start, expectList) {
+      it(name, () => {
+        const len = max - min + 1;
+        const renderList = new Array(len)
+          .fill(null)
+          .map((_, index) => getIndexByStartLoc(min, max, start, index));
+
+        expect(renderList).toEqual(expectList);
+      });
+    }
+
+    // Balance
+    test('balance - basic', 0, 2, 1, [1, 2, 0]);
+    test('balance - moving', 3, 13, 8, [8, 9, 7, 10, 6, 11, 5, 12, 4, 13, 3]);
+
+    // After less
+    test('after less', 3, 9, 7, [7, 8, 6, 9, 5, 4, 3]);
+
+    // Before less
+    test('before less', 1, 9, 3, [3, 4, 2, 5, 1, 6, 7, 8, 9]);
+  });
+
+  describe('findListDiff', () => {
+    function test(name, length, diff) {
+      it(name, () => {
+        const originList = new Array(length).fill(null).map((_, index) => index);
+        const targetList = originList.slice();
+        targetList.splice(diff, 1);
+
+        expect(findListDiffIndex(originList, targetList, num => num)).toEqual(diff);
+      });
+    }
+
+    for (let i = 0; i < 100; i += 1) {
+      test(`diff index: ${i}`, 100, i);
+    }
+  });
+});