[JavaScript知识库]关于Select下拉框要展示1000+条数据时太卡的解决方案

一、问题描述

antd 中下拉框组件Select 在渲染1000条级别的数据时会导致卡顿

解决方案：
**思路：**采用分页的形式，通过计算滚动条触底时更新下一页数据；

import { Select } from 'antd';
import React, { useEffect, useState } from 'react';

const { Option } = Select;

export default function learn6() {
  const [data, setdata] = useState([]); // 假数据
  const [selectData, setselectData] = useState({
    pageSize: 100,
    pageNum: 1,
    data: []
  }); // 下拉框数据

  useEffect(() => {
    const arr: any = [];
    for (let i = 0; i < 1000; i++) {
      arr.push(i);
    }
    setdata(arr);
    // 初始化 前100条数据
    setselectData((pre) => ({
      ...pre,
      data: arr.slice(0, 100)
    }));
  }, []);

  // 下拉框选择内容时滚动触发
  const onPopupScrollHandle = (event: any) => {
    const scrollTop = event.target.scrollTop; // 卷去的高度
    const scrollHeight = event.target.scrollHeight; // 滚动条高度
    const clientHeight = event.target.clientHeight; // 盒子高度
    // console.log(scrollTop, 'scrollTop', scrollHeight, 'scrollHeight');

    // 当滚动条滑动到最后一条数据
    if (scrollHeight - scrollTop <= clientHeight) {
      console.log('滚动条到底部了');
      setselectData((pre) => ({
        ...pre,
        pageNum: pre.pageNum + 1,
        data: [
          ...pre.data,
          ...data.slice(
            pre.pageNum * pre.pageSize,
            (pre.pageNum + 1) * pre.pageSize
          )
        ]
      }));
    }
  };

  return (
    <div>
      <Select
        style={{ width: 200 }}
        onPopupScroll={onPopupScrollHandle}
        placeholder="请选择"
      >
        {selectData.data.map((item) => {
          return (
            <Option key={item} value={item}>
              {item}
            </Option>
          );
        })}
      </Select>
    </div>
  );
}