在 React Select 中高效渲染大量数据

Question

在可搜索的反应选择下拉列表中呈现大量数据的最佳方法是什么？我研究过窗口化，其中仅为在视口中可见的项目创建 DOM 节点。这可以通过使用react-window包和react-select来完成。但是，我想知道是否有比这更好的方法。

这是使用react-window和react-select的窗口实现

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import { FixedSizeList as List } from "react-window";

import "./styles.css";

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

const height = 35;

class MenuList extends Component {
  render() {
    const { options, children, maxHeight, getValue } = this.props;
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * height;

    return (
      <List
        height={maxHeight}
        itemCount={children.length}
        itemSize={height}
        initialScrollOffset={initialOffset}
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </List>
    );
  }
}

const App = () => <Select components={{ MenuList }} options={options} />;

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

我将您提到的解决方案（react-window）与filterOption解决方案以及较少讨论的react-async组件结合起来。这对我来说非常有效。

react-window 会执行某种“延迟加载”，而异步反应会在显示搜索查询之前显示加载标志。这些加在一起让人感觉更加自然（我有 7000 多个选项）。

这是我第一次回复帖子，所以如果（任何人）有疑问请告诉我，我会尽力回答

import React, { Component } from "react";
import AsyncSelect from "react-select/async";
import { FixedSizeList as List } from "react-window";
import { createFilter } from "react-select";

import "./styles.css";

const TestSelect = (vendorOptions) => {


const options = [];
for (let i = 0; i < vendorOptions["vendorOptions"].length; i = i + 1) {
  options.push({ value: vendorOptions["vendorOptions"][i], label: `${vendorOptions["vendorOptions"][i]}` });
}

const loadOptions = (inputValue, callback) => {
    setTimeout(() => {
      callback(options);
    }, 1000);
  };


const height = 35;

class MenuList extends Component {
  render() {
    const { options, children, maxHeight, getValue } = this.props;
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * height;

    return (
      <List
        height={maxHeight}
        itemCount={children.length}
        itemSize={height}
        initialScrollOffset={initialOffset}
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </List>
    );
  }
}

const TestSelectComponent = () => {
    
    return(
        <div className ="testDropdown">
          <AsyncSelect components={{ MenuList }} cacheOptions defaultOptions loadOptions={loadOptions} filterOption={createFilter({ ignoreAccents: false })}/>
        </div>
    )
}
    return (
    <TestSelectComponent />
    )
}
export default TestSelect

Answer 2

如果您查看，您会发现默认值是

ignoreAccents: true

。这个默认值使得react-select 调用一个名为

stripDiacritics

的昂贵函数两次。这会导致性能问题。

将

ignoreAccents: false

包含在反应选择中。

示例：

filterOption={createFilter({ ignoreAccents: false })}

Answer 3

要在 React 中实现下拉选择，您可以选择 React-Select——一个专为 ReactJS 设计的适应性强且具有视觉吸引力的选择输入控件。它支持多选、自动完成、异步和可创建选项等功能。

这是一个用于展示选择组件的简单代码片段：

此外，您还可以利用 React-Select 和 React-Window 的强大功能。这种组合确保了大型列表的渲染，同时保持效率和速度。更好的是，Google 上有免费的说明，指导您如何使用 React-Select 优化大量列表的渲染。只需选择最适合您的一款即可。