如何修复包含大量选项的选择元素的延迟

Question

我有一个使用 react material ui 的 react 应用程序，我使用的是自动完成react-select示例，您可以在此处找到。

https://material-ui.com/components/autocomplete/

当SELECT中的项目数量大时，例如左右2500左右〜它滞后并变得无法使用。

我修改了原始演示以提出长度为 2500 的建议来填充选择。

const suggestions = [];
for (let i = 0; i < 2500; i = i + 1) {
  suggestions.push({ value: i, label: `Option ${i}` });
}

请参阅我的问题的以下演示示例。

https://codesandbox.io/s/material-demo-vp59j

当您单击第一个选择器时，它非常滞后。

Answer 1

我使用“filterOptions”来显示前 500 个项目，其他项目在搜索时仍然匹配，就像这样。

  import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';

  const filterOptions = createFilterOptions({
    matchFrom: 'any',
    limit: 500,
  });
  
  <Autocomplete
    filterOptions={filterOptions}
  />

更多论据。>> https://material-ui.com/components/autocomplete/#custom-filter

Answer 2

您应该用于react-window此目的。https://github.com/bvaughn/react-window

它是一个用于高效渲染大型列表和表格数据的库。

这是一个工作演示，其中有很多记录要显示。它不滞后https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-bbtz0

PS：这是由 Facebook React 团队的核心人员之一撰写的。