一个虚拟列表是指当我们有成千上万条数据需要进行展示但是用户的“视窗”(一次性可见内容)又不大时我们可以通过巧妙的方法只渲染用户最大可见条数+“BufferSize”个元素并在用户进行滚动时动态更新每个元素中的内容从而达到一个和长list滚动一样的效果但花费非常少的资源。

实现方式

首先在 vListContainer 中渲染了一个真实 list 高度的虚拟容器从而允许用户进行滚动操作。其次我们监听了 onScroll 事件,并且在每次用户触发滚动时动态计算当前滚动 offset 所对应的开始下标是多少。当我们发现新的下边和我们当前展示的下标不同时进行赋值并且触发 setState 重绘。当用户当前的滚动offset未触发下标更新时,则因为本身phantom的长度关系让虚拟列表拥有和普通列表一样的滚动能力。当触发重绘时因为我们计算的是startIndex 所以用户感知不到页面的重绘(因为当前滚动的下一帧和我们重绘完的内容是一致的)。

引用