虚拟化列表技术作为按需加载技术的一种实现,其意义重大。
其中react-virtualize库是现在比较流行的虚拟化技术的三方库,现在说一下它的具体实现逻辑。
它的大体思想是根据根据可视窗口大小和单元格的高度计算出一屏可以展示多少个单元格,当滑动时,重新计算要展示的单元格,然后重新渲染。
第一部分是初始加载的时候,下面是它的具体使用:

内部引用了具体的List组件,现在我们来看一下List的具体实现

List组件内部是使用Grid组件渲染的,接下来重点研究Grid组件。
一、 Grid组件初始加载的时候
首先看构造函数:
构造函数中初始化了state,计算初始的水平和垂直方向的偏移量。

接着计算出偏移量之后,进行渲染,渲染之前会触发getDerivedStateFromProps方法,
该方法用于从props中派生state的情况,用于修改state,这个方法一般会造成数据来源混乱,一般比较少用。
该方法主要是通过获取的props,进行了state中偏移量数据的更新,还有一些存储数据的更改。

接下来去看一下render方法。

render方法中重点是childrenToDisplay的计算,现在研究一下这个方法。
这个方法中会调用getVisableCellRange的方法,该方法主要实现了要展示的单元格的开始和结束的下表。
该方法会根据现在的偏移量计算出一个最接近的偏移量的index下标作为开始下标,再加上一个可见区域的高度计算出结束下标,还可以设置一个过渡的列数作为过渡展示区域
二、进行滑动部分的操作
滑动方法里面主要的逻辑是滑动时偏移量数据改变之后,重新计算偏移量,更改state。
这个方法里用到了requestAnimationFrame的h5新方法,用于防抖操作,避免滑动事件多次执行。
