rc-virtual-list 学习笔记

最近学习了一下 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