会有大量数据的ant的select框优化（分页+打开virtual虚拟滚动+loading加载效果+usedebouce防抖）

组件

 <Select
              mode="multiple"
              showArrow={true}
              showSearch
              onSearch={handleSearch}
              filterOption={false}
              notFoundContent={loading ? <Spin size="small" /> : null}
              loading={loading ? <Spin size="small" /> : null}
              onPopupScroll={handleScroll}
              autoClearSearchValue={false}
              virtual={true}
              listItemHeight={10}
              listHeight={150}
            >
              {options.map((item, index) => (
                <Option value={item.id} key={item.id + index}>
                  {item.name}
                </Option>
              ))}
            </Select>

下拉滚动分页，获取到的数组用some查重再放入原来的数组里面，添加loading 下拉或者未加载完的时候会有loading效果，加入usedebounce避免滚动过度频繁

  const handleScroll = (e) => {
    const { scrollTop, clientHeight, scrollHeight } = e.target;
    if (scrollTop + clientHeight >= scrollHeight) {
      setPage((prevPage) => prevPage + 1);
      // loadData(page + 1);
      setReselect((a) => ++a);
    }
  };
 useEffect(() => {
    loadData();
  }, [reselect]);
  const loadData = useDebounce(() => {
    setLoading(true);

    axios
      .post(
        page: {
          currentPage: page,
          pageSize: 10,
        },
      })
      .then((res) => res.data)
      .then((data) => {
        if (data.code === 0) {
          if (data.data === null) {
            setLoading(false);
          } else {
            setOptions((prevOptions) => {
              const existingOptions = prevOptions.filter(
                (option) =>
                  !data.data.records.some(
                    (newOption) => newOption.id === option.id
                  )
              );
              return [...existingOptions, ...data.data.records];
            });
            setLoading(false);
          }
        } else {
          setLoading(false);

          console.log(data.message);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, 300);