最近學習了一下 rc-virtual-list 這個組件，記錄一下。
對於一個大的列表，例如，百數量級以上，Dom 的渲染會有很大的性能壓力。這個組件通過只渲染可視區域內的部分組件，實際的 Dom 數量只在兩位數，從而提高了性能。
它的 Dom 結構比較簡單
- 為了使用 virtual scroll, 必須提供 height 和 itemheight, 這兩個高度
- 這個組件的核心功能是如何計算出哪些組件是需要渲染的。
- 首先它內部使用 useHeights hook 方法，將每個渲染的元素，以及高度依據 key 進行緩存，Map.
- 然后它依據當前的 scrollTop,來計算出在可視區域內部的 items,
- 接着調用 useChildren ，這個里面主要通過調用如下方法，也就是我們傳遞進去的 children 來將可視區域內的 item 渲染出來。第三個參數沒有用，里面是個空對象。
export type RenderFunc<T> = (
item: T,
index: number,
props: { style?: React.CSSProperties }
) => React.ReactNode;
當然這個組件還有其他的一些輔助功能，以上的就是它的核心，了解它就可以了。
它重要的幾個參數，就像github列出的
- data: items 也就是要展示的數據
- component: 這個默認是 div, 你可以理解成，你的 item 的容器，相當於 ul 至於 li,
- height: 這個是可視區域的高度。
- itemHeight: 這個是每個 item 的高度，這個只是默認值，實際的高度可以不一樣的。
- itemKey: 這個是每個 item 的 key, 非常重要，可以是 item 數據的某一個 property, 也可以是一個函數
(item)=>string