react 长列表加载优化

背景

开发中不可避免地会遇到加载滚动列表的问题。列表数据很长，成千上万的数据。
假如有一千条数据，没有分页，想要同时渲染这一千条数据，生成对应的dom节点。
而这些dom元素全部加载的话，会使页面失去响应，导致整个应用崩溃。(网页失去响应，事件等无法及时被触发)

所以需要通过虚拟列表的方式来优化长列表的加载。
react优化长列表方案如下：

• react-custom-scrollbars
• react-virtualized
• react-tiny-virtual-list

虚拟化列表优化原理

数组：将数据保存至数组中，只渲染可视窗口的列表元素。
当可视区域滚动时，需要根据滚动的位移量，计算出可视区域中的元素下标，通过下标来渲染数组元素。

分页：或需要通过分页请求数据接口，进行渲染

优化方案

react-custom-scrollbars

• 滚动框组件Scrollbars(数组)，InfiniteScroll(分页)
• 组件内方法onScroll，onScrollStop，getValues，scrollToTop
• scrollToTop

import { Scrollbars } from 'react-custom-scrollbars';

class App extends Component {
  handleClick() {