Use object as map (#43)

* refactor: Use cachemap

* clean up

Author: zombieJ

examples/basic.tsx

@@ -34,7 +34,7 @@ class TestItem extends React.Component<Item, {}> {
 }
 
 const data: Item[] = [];
-for (let i = 0; i < 200; i += 1) {
+for (let i = 0; i < 100000; i += 1) {
   data.push({
     id: String(i),
   });
@@ -47,18 +47,10 @@ const TYPES = [
 
 const Demo = () => {
   const [destroy, setDestroy] = React.useState(false);
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = React.useState(true);
   const [type, setType] = React.useState('dom');
   const listRef = React.useRef<ListRef>(null);
 
-  React.useEffect(() => {
-    if (visible) {
-      listRef.current.scrollTo({
-        index: 100,
-      });
-    }
-  }, [visible]);
-
   return (
     <React.StrictMode>
       <div>

src/List.tsx

@@ -119,7 +119,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     let startOffset: number;
     let endIndex: number;
 
-    for (let i = 0; i < mergedData.length; i += 1) {
+    const dataLen = mergedData.length;
+    for (let i = 0; i < dataLen; i += 1) {
       const item = mergedData[i];
       const key = getKey(item);
 

src/hooks/useHeights.tsx

@@ -2,17 +2,18 @@ import * as React from 'react';
 import { useRef } from 'react';
 import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import { GetKey } from '../interface';
+import CacheMap from '../utils/CacheMap';
 
 type RefFunc = (instance: HTMLElement) => void;
 
 export default function useHeights<T>(
   getKey: GetKey<T>,
   onItemAdd?: (item: T) => void,
   onItemRemove?: (item: T) => void,
-): [(item: T) => (instance: HTMLElement) => void, () => void, Map<React.Key, number>, 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 Map<React.Key, number>());
+  const heightsRef = useRef(new CacheMap());
 
   const instanceFuncRef = useRef<Map<React.Key, RefFunc>>(new Map());
   function getInstanceRefFunc(item: T) {

src/hooks/useScrollTo.tsx

@@ -3,11 +3,12 @@ import * as React from 'react';
 import raf from 'rc-util/lib/raf';
 import { ScrollTo } from '../List';
 import { GetKey } from '../interface';
+import CacheMap from '../utils/CacheMap';
 
 export default function useScrollTo<T>(
   containerRef: React.RefObject<HTMLDivElement>,
   data: T[],
-  heights: Map<React.Key, number>,
+  heights: CacheMap,
   itemHeight: number,
   getKey: GetKey<T>,
   collectHeight: () => void,

src/utils/CacheMap.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+// Firefox has low performance of map.
+class CacheMap {
+  maps: Record<string, number>;
+
+  constructor() {
+    this.maps = {};
+    this.maps.prototype = null;
+  }
+
+  set(key: React.ReactText, value: number) {
+    this.maps[key] = value;
+  }
+
+  get(key: React.ReactText) {
+    return this.maps[key];
+  }
+}
+
+export default CacheMap;