优化长列表

最近做的项目有一个列表模块数据量巨大，后端限制完数据后还有大概10000条数据，直接渲染的话会有明细的卡顿情况，于是撸起袖子开始重构。

这里只回顾一下实现原理以便以后忘了能立马捡起来：

1.保存原始列表数组数据；

2.只渲染可视区域大小的元素；

3.当滚轮滚动时，动态的计算当前的scrollTop的值，然后根据列表每条数据的高度动态的去获取可视区域应该展现的列表数组元素；

4.做内外两次div，外层做固定高度，overflow：auto，内层做相对定位，并且内层的高度为所有数据占满的高度，将需求展示的列表数据元素做绝对定位，绝对定位的top值 = 列表每个数据元素的自身高度*索引值。

代码片段：

import { findDOMNode } from 'react-dom';
onScroll= ()=>{
   const ele = findDOMNode(this.virtualDom);
   console.log(ele.scrollTop) //获取需要的dom节点的scrollTop值
}

<div ref={v => this.virtualDom = v}>
</div>