Question

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

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

当选择的项目数很大时，例如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

P.S：这是Facebook反应团队的核心人物之一。

Answer 3

我遇到了与创建大约3000个值的下拉菜单相同的问题。技巧是在“自动完成”下拉列表中显示有限的项目，并让用户搜索在下拉列表中找不到的项目。

使用物料Ui自动完成的Filteroptions功能并使用限制参数并将其设置为200。

“自动完成”将在下拉列表中仅显示200个项目，其余内容可以搜索。

如何解决包含大量选项的select元素的滞后

3 个答案: