长列表优化(虚拟列表)实践

介绍

长列表优化是一个常见的问题，简单来说就是服务一下给你返回一万条数据，前端如果真的全部渲染出来，性能将是一个无法想象的问题；怎么做到只渲染可视区以及附近那几条数据的渲染，其他区域不渲染是一个前端问题，也就是这里所说的长列表优化。一般来讲这种问题有两种解决办法：

• 做分页处理(服务分页0r前端伪分页均可)；
• 虚拟列表；

分页处理是一个常见的处理方式，技术上没啥难度；虚拟列表处理在社区有很多讨论，也有npm包可以直接使用，这里分析一下其原理和简易实现；

虚拟列表原理

虚拟列表优化的前提条件是：列表每一项的高度一样活着近似，否则会计算不准确；

虚拟列表的核心有以下几点：

• 可视区域用真实的数据填充；
• 非可视区的面积通过padding来填充(这样滚动条以及滚动数据接近展示情况)；
• 监听父容器的scroll事件，通过scrollTop的值计算当前可视区应该展示的数据的范围；

demo实现

import React, {
    useState, useEffect, useRef, } from 'react'
import './index.less'

const height = 40  //列表的每个item的高度为40
const bufferSize = 5  //缓冲区域，实现无缝滚动的效果

export default (props) => {
   
  const [startOffset, setStartOffset] = useState<number>(0)
  const [endOffset, setEndOffset] = useState<number>(0)
  const