如何修复包含大量选项的select元素上的滞后

import React from 'react';
import { List } from 'react-virtualized';

function renderRow({ index, key, style }) {
  return (
    <div key={key} style={style}>
      Option {index}
    </div>
  );
}

function LargeSelect() {
  const optionsCount = 10000; // 假设有10000个选项

  return (
    <List
      width={300}
      height={300}
      rowCount={optionsCount}
      rowHeight={20}
      rowRenderer={renderRow}
    />
  );
}

export default LargeSelect;

import React, { useState } from 'react';

function LargeSelect() {
  const [options, setOptions] = useState([]);
  const [page, setPage] = useState(1);
  const pageSize = 100; // 每页显示100个选项

  const loadOptions = () => {
    // 模拟异步加载选项
    setTimeout(() => {
      const newOptions = Array.from({ length: pageSize }, (_, i) => `Option ${((page - 1) * pageSize) + i + 1}`);
      setOptions(prevOptions => [...prevOptions, ...newOptions]);
      setPage(page + 1);
    }, 500);
  };

  return (
    <div>
      {options.map((option, index) => (
        <div key={index}>{option}</div>
      ))}
      <button onClick={loadOptions}>Load More</button>
    </div>
  );
}

export default LargeSelect;

import React, { useState } from 'react';

function CustomSelect({ options }) {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(options[0]);

  return (
    <div>
      <div onClick={() => setIsOpen(!isOpen)}>{selectedOption}</div>
      {isOpen && (
        <ul>
          {options.map((option, index) => (
            <li key={index} onClick={() => setSelectedOption(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function App() {
  const options = Array.from({ length: 10000 }, (_, i) => `Option ${i + 1}`);

  return <CustomSelect options={options} />;
}

export default App;