虚拟长列表的实现

数据量过大时，渲染dom会造成页面卡顿现象，使用虚拟长列表可以实现性能优化，通过监听滚动条变化，动态截取部分数据进行渲染展示，提高性能

  const height = 20; //每行高度
  const count = 30;  //可视区域显示的条数
  let start = 0;  //截取起始位置
  let end = 30;   //截取结束位置
  //原始大量数据
  const list = new Array(100000).fill(null).map((item, index) => ({ num: index + 1 }))
  //要展示的数据列表
  const [showList, setShowList] = React.useState([] as any)  
  const Height = `${height * count}`//可视区域总高度
  const Height2 = `${height * list.length}` //文档总高度
  const contentRef=React.useRef(null as any)
  //监听滚动事件
  const onScroll = (event) => {
    const scrollTop = event.target.scrollTop
    start = Math.round(scrollTop / height)
    end = start + count
    setShowList(list.slice(start, end))
    //抵消浏览器的滚动
    contentRef.current.style.transform=`translateY(${scrollTop}px)`   
  }
  return（<div>
    <div style={{ width: 300, backgroundColor: '#ccc', height: Number(Height), overflow: 'scroll', }} onScroll={onScroll}>
          <div style={{ width: 300, height: Number(Height2)}}>
            <div className="content" 
              ref={contentRef}>
              {showList.map(item => {
                return <div style={{ height: height }}>{item.num}</div>
              })}
            </div>
          </div>
        </div>
 </div>）