perf: skipping re-rendering

Author: muzea

src/Filler.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import ResizeObserver from 'rc-resize-observer';
 import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import * as React from 'react';
 
 export type InnerProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
 
@@ -69,14 +69,19 @@ const Filler = React.forwardRef(
       };
     }
 
+    const handleResize = React.useCallback(
+      ({ offsetHeight }) => {
+        if (offsetHeight && onInnerResize) {
+          onInnerResize();
+        }
+      },
+      [onInnerResize],
+    );
+
     return (
       <div style={outerStyle}>
         <ResizeObserver
-          onResize={({ offsetHeight }) => {
-            if (offsetHeight && onInnerResize) {
-              onInnerResize();
-            }
-          }}
+          onResize={handleResize}
         >
           <div
             style={innerStyle}

src/List.tsx

@@ -165,9 +165,11 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     setScrollMoving(false);
   };
 
-  const sharedConfig: SharedConfig<T> = {
-    getKey,
-  };
+  const sharedConfig: SharedConfig<T> = React.useMemo(() => {
+    return {
+      getKey,
+    };
+  }, [getKey]);
 
   // ================================ Scroll ================================
   function syncScrollTop(newTop: number | ((prev: number) => number)) {

src/hooks/useChildren.tsx

@@ -12,20 +12,23 @@ export default function useChildren<T>(
   renderFunc: RenderFunc<T>,
   { getKey }: SharedConfig<T>,
 ) {
-  return list.slice(startIndex, endIndex + 1).map((item, index) => {
-    const eleIndex = startIndex + index;
-    const node = renderFunc(item, eleIndex, {
-      style: {
-        width: scrollWidth,
-      },
-      offsetX,
-    }) as React.ReactElement;
+  // 可能存在 list 不变但是里面的数据存在变化的情况，会与之前写法存在不同的行为
+  return React.useMemo(() => {
+    return list.slice(startIndex, endIndex + 1).map((item, index) => {
+      const eleIndex = startIndex + index;
+      const node = renderFunc(item, eleIndex, {
+        style: {
+          width: scrollWidth,
+        },
+        offsetX,
+      }) as React.ReactElement;
 
-    const key = getKey(item);
-    return (
-      <Item key={key} setRef={(ele) => setNodeRef(item, ele)}>
-        {node}
-      </Item>
-    );
-  });
+      const key = getKey(item);
+      return (
+        <Item key={key} setRef={(ele) => setNodeRef(item, ele)}>
+          {node}
+        </Item>
+      );
+    });
+  }, [list, startIndex, endIndex, setNodeRef, renderFunc, getKey, offsetX, scrollWidth]);
 }

src/hooks/useHeights.tsx

@@ -24,11 +24,11 @@ export default function useHeights<T>(
 
   const promiseIdRef = useRef<number>(0);
 
-  function cancelRaf() {
+  const cancelRaf = React.useCallback(function cancelRaf() {
     promiseIdRef.current += 1;
-  }
+  }, []);
 
-  function collectHeight(sync = false) {
+  const collectHeight = React.useCallback(function (sync = false) {
     cancelRaf();
 
     const doCollect = () => {
@@ -67,9 +67,9 @@ export default function useHeights<T>(
         }
       });
     }
-  }
+  }, [cancelRaf]);
 
-  function setInstanceRef(item: T, instance: HTMLElement) {
+  const setInstanceRef = React.useCallback(function setInstanceRef(item: T, instance: HTMLElement) {
     const key = getKey(item);
     const origin = instanceRef.current.get(key);
 
@@ -88,11 +88,12 @@ export default function useHeights<T>(
         onItemRemove?.(item);
       }
     }
-  }
+  }, [collectHeight, getKey, onItemAdd, onItemRemove]);
 
   useEffect(() => {
     return cancelRaf;
   }, []);
 
+  // 这里稍显迷惑性，当 heightsRef.current.set 被调用时，updatedMark 会变化，进而导致 heightsRef.current 也出现变化
   return [setInstanceRef, collectHeight, heightsRef.current, updatedMark];
 }