refactor: Use frame of scroll (#44)

* clean up ref

* add update mark

* rm ref cache

* wheel as a frame

* fix test case

* coverage

Author: zombieJ

src/Item.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface ItemProps {
+  children: React.ReactElement;
+  setRef: (element: HTMLElement) => void;
+}
+
+export function Item({ children, setRef }: ItemProps) {
+  const refFunc = React.useCallback(node => {
+    setRef(node);
+  }, []);
+
+  return React.cloneElement(children, {
+    ref: refFunc,
+  });
+}

src/List.tsx

@@ -8,6 +8,7 @@ import useHeights from './hooks/useHeights';
 import useInRange from './hooks/useInRange';
 import useScrollTo from './hooks/useScrollTo';
 import useDiffItem from './hooks/useDiffItem';
+import useFrameWheel from './hooks/useFrameWheel';
 
 const EMPTY_DATA = [];
 
@@ -97,7 +98,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   diffItemRef.current = diffItem;
 
   // ================================ Height ================================
-  const [getInstanceRefFunc, collectHeight, heights, heightUpdatedMark] = useHeights(
+  const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = useHeights(
     getKey,
     null,
     null,
@@ -169,19 +170,14 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   // ================================ Scroll ================================
   // Since this added in global,should use ref to keep update
-  function onRawWheel(event: MouseWheelEvent) {
-    if (!inVirtual) return;
-
-    // Proxy of scroll events
-    event.preventDefault();
-
+  const onRawWheel = useFrameWheel(inVirtual, offsetY => {
     setScrollTop(top => {
-      const newTop = keepInRange(top + event.deltaY);
+      const newTop = keepInRange(top + offsetY);
 
       componentRef.current.scrollTop = newTop;
       return newTop;
     });
-  }
+  });
 
   // Additional handle the scroll which not trigger by wheel
   function onRawScroll(event: React.UIEvent) {
@@ -214,14 +210,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   }));
 
   // ================================ Render ================================
-  const listChildren = useChildren(
-    mergedData,
-    start,
-    end,
-    getInstanceRefFunc,
-    children,
-    sharedConfig,
-  );
+  const listChildren = useChildren(mergedData, start, end, setInstanceRef, children, sharedConfig);
 
   return (
     <Component

src/hooks/useChildren.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { SharedConfig, RenderFunc } from '../interface';
+import { Item } from '../Item';
 
 export default function useChildren<T>(
   list: T[],
   startIndex: number,
   endIndex: number,
-  getInstanceRefFunc: (item: T) => (instance: HTMLElement) => void,
+  setNodeRef: (item: T, element: HTMLElement) => void,
   renderFunc: RenderFunc<T>,
   { getKey }: SharedConfig<T>,
 ) {
@@ -16,9 +17,10 @@ export default function useChildren<T>(
     }) as React.ReactElement;
 
     const key = getKey(item);
-    return React.cloneElement(node, {
-      key,
-      ref: getInstanceRefFunc(item),
-    });
+    return (
+      <Item key={key} setRef={ele => setNodeRef(item, ele)}>
+        {node}
+      </Item>
+    );
   });
 }

src/hooks/useFrameWheel.ts

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+import raf from 'rc-util/lib/raf';
+
+export default function useFrameWheel(inVirtual: boolean, onWheelDelta: (offset: number) => void) {
+  const offsetRef = useRef(0);
+  const nextFrameRef = useRef<number>(null);
+
+  function onWheel(event: MouseWheelEvent) {
+    if (!inVirtual) return;
+
+    // Proxy of scroll events
+    event.preventDefault();
+
+    raf.cancel(nextFrameRef.current);
+    offsetRef.current += event.deltaY;
+
+    nextFrameRef.current = raf(() => {
+      onWheelDelta(offsetRef.current);
+      offsetRef.current = 0;
+    });
+  }
+
+  return onWheel;
+}

src/hooks/useHeights.tsx

@@ -10,41 +10,48 @@ export default function useHeights<T>(
   getKey: GetKey<T>,
   onItemAdd?: (item: T) => void,
   onItemRemove?: (item: T) => void,
-): [(item: T) => (instance: HTMLElement) => void, () => void, CacheMap, number] {
+): [(item: T, instance: HTMLElement) => void, () => void, CacheMap, number] {
   const [updatedMark, setUpdatedMark] = React.useState(0);
   const instanceRef = useRef(new Map<React.Key, HTMLElement>());
   const heightsRef = useRef(new CacheMap());
 
-  const instanceFuncRef = useRef<Map<React.Key, RefFunc>>(new Map());
-  function getInstanceRefFunc(item: T) {
+  function setInstanceRef(item: T, instance: HTMLElement) {
     const key = getKey(item);
-    if (!instanceFuncRef.current.has(key)) {
-      instanceFuncRef.current.set(key, (instance: HTMLElement) => {
-        const origin = instanceRef.current.get(key);
-        instanceRef.current.set(key, instance);
-
-        // Instance changed
-        if (!origin !== !instance) {
-          if (instance) {
-            onItemAdd?.(item);
-          } else {
-            onItemRemove?.(item);
-          }
-        }
-      });
+    const origin = instanceRef.current.get(key);
+
+    if (instance) {
+      instanceRef.current.set(key, instance);
+    } else {
+      instanceRef.current.delete(key);
+    }
+
+    // Instance changed
+    if (!origin !== !instance) {
+      if (instance) {
+        onItemAdd?.(item);
+      } else {
+        onItemRemove?.(item);
+      }
     }
-    return instanceFuncRef.current.get(key);
   }
 
   function collectHeight() {
+    let changed = false;
+
     instanceRef.current.forEach((element, key) => {
       if (element && element.offsetParent) {
         const htmlElement = findDOMNode<HTMLElement>(element);
-        heightsRef.current.set(key, htmlElement.offsetHeight);
+        const { offsetHeight } = htmlElement;
+        if (heightsRef.current.get(key) !== offsetHeight) {
+          changed = true;
+          heightsRef.current.set(key, htmlElement.offsetHeight);
+        }
       }
     });
-    setUpdatedMark(c => c + 1);
+    if (changed) {
+      setUpdatedMark(c => c + 1);
+    }
   }
 
-  return [getInstanceRefFunc, collectHeight, heightsRef.current, updatedMark];
+  return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
 }

tests/list.test.js

@@ -192,8 +192,16 @@ describe('List.Basic', () => {
       const wrapper = genList({ itemHeight: 20, height: 40, data: genData(3) });
       wrapper
         .find('Filler')
+        .find('ResizeObserver')
         .props()
-        .onInnerResize();
+        .onResize({ offsetHeight: 0 });
+      expect(collected).toBeFalsy();
+
+      wrapper
+        .find('Filler')
+        .find('ResizeObserver')
+        .props()
+        .onResize({ offsetHeight: 100 });
       expect(collected).toBeTruthy();
     });
   });

tests/mock.test.js

@@ -16,7 +16,7 @@ describe('MockList', () => {
     for (let i = 0; i < 3; i += 1) {
       expect(
         wrapper
-          .find('span')
+          .find('Item')
           .at(i)
           .key(),
       ).toBe(String(i));

tests/props.test.js

@@ -4,28 +4,28 @@ import List from '../src';
 
 describe('Props', () => {
   it('itemKey is a function', () => {
-    class Item extends React.Component {
+    class ItemComponent extends React.Component {
       render() {
         return this.props.children;
       }
     }
 
     const wrapper = mount(
       <List data={[{ id: 903 }, { id: 1128 }]} itemKey={item => item.id}>
-        {({ id }) => <Item>{id}</Item>}
+        {({ id }) => <ItemComponent>{id}</ItemComponent>}
       </List>,
     );
 
     expect(
       wrapper
-        .find(Item)
+        .find('Item')
         .at(0)
         .key(),
     ).toBe('903');
 
     expect(
       wrapper
-        .find(Item)
+        .find('Item')
         .at(1)
         .key(),
     ).toBe('1128');

tests/scroll.test.js

@@ -96,6 +96,8 @@ describe('List.Scroll', () => {
     wheelEvent.preventDefault = preventDefault;
     ulElement.dispatchEvent(wheelEvent);
 
+    jest.runAllTimers();
+
     expect(preventDefault).toHaveBeenCalled();
   });
 });