react实现虚拟滚动（虚拟列表）

1.虚拟滚动

虚拟滚动就是只渲染可视区域，以此来提高渲染和用户体验

2.代码实现

jsx代码：

import React from "react";
import "./App.css";
import { useState, useEffect, useRef } from "react";

export default function App() {
  let array = []; //总数据
  for (let i = 0; i < 1000; i++) {
    array.push(i);
  }

  let item = 50; // li标签的高度
  let ulref = useRef();
  let divref = useRef();

  let [showArray, setShowArray] = useState([]); //显示的数据
  let [start, setStart] = useState(0); //开始位置
  let [end, setEnd] = useState(11); // 结束位置
  let num = 11; //显示的数量

  //初始化执行
  useEffect(() => {
    let data = array.slice(start, end);
    setShowArray(data);
    let scrollBar = document.querySelector(".scrollBar");
    scrollBar.style.height = item * array.length + "px";
  }, []); //showArray 发生变化再次执行

  //滚动事件
  const scroll = () => {
    let scrollTop = divref.current.scrollTop;//获取每次滚动的高度
    //获取索引位置的计算
    let getStart = Math.floor(scrollTop / item);
    //计算结束索引
    let getEnd = getStart + num
    ulref.current.style.top = getStart * item + 'px' // 滚动后偏移量
    let data = array.slice(getStart,getEnd) // 获取滚动后的新数据
    setShowArray(data) //重新设置数据
  };

  return (
    <div>
      <div
        ref={divref}
        className="box"
        onScroll={(e) => {
          scroll(e);
        }}
      >
        <div className="scrollBar"></div>
        <ul ref={ulref}>
          {showArray.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

css代码：

.box{
  position: relative;
  height: 500px;
  width: 300px;
  overflow-y: scroll;
}

.scrollBar{height: 0;}

ul{
  position: absolute;
  top: 0;
  left: 0;
}
li{
  line-height: 50px;
}