具有非常大的选项列表的 React Select

Question

我有一个选择组件，它需要处理其中大约 7,000 个选项。我遇到了两个问题。

1) 输入搜索参数时加载速度太慢。

2) 我需要过滤所有选项并禁用以前选择的选项（从我从数据库加载的值中）或刚刚在此页面加载时选择的选项。

对于第一个问题，我尝试利用https://github.com/bvaughn/react-select-fast-filter-options，它适用于第一页加载。每当我尝试以任何方式修改选项时都会遇到问题，正如您将看到的那样，我最初尝试通过 ajax 调用（我可以更改）加载选项，或者如果我需要动态禁用选项，我认为这可能会中断它。

对于第 2 个问题，当我尝试过滤所有这些选项时，需要很长时间，因为每次有人在列表中进行选择时，我都会循环通过所有 7,000 个选项。

这方面的一些指导可能会有所帮助。为了进一步了解这里是我到目前为止的代码：

import React, {Component} from 'react'
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'
import VirtualizedSelect from 'react-virtualized-select'
import axios from 'axios';

class StockSearch extends Component {
    static propTypes = {
        exchanges: PropTypes.array.isRequired,
        onSelectChange: PropTypes.func.isRequired,
        searchDisabled: PropTypes.bool.isRequired,
        picks: PropTypes.array.isRequired,
        stock_edit_to_show: PropTypes.number
    }

    state = {
        stocks: [],
        selected: []
    }

    componentWillReceiveProps = (nextProps) => {

    }

    /**
     * Component Bridge Function
     * @param stock_id stocks id in the database
     */
    stockSearchChange = (stock_id) => {
        this.props.onSelectChange(stock_id);
    }

    componentWillMount = () => {
        this.fetchStocks(this.props.exchanges);
    }

    /**
     * Responsible for fetching all of the stocks in the database
     * @param exchanges comma denominated list of exchange ids
     */
    fetchStocks = (exchanges) => {
        let stringExchanges = exchanges.join();
        axios.get('/stock-search-data-by-exchange/', {
            params: {
               exchanges: stringExchanges
            }
        })
        .then(response => {
            this.setState({
                stocks: response.data
            })
        })
        .catch(error => {
            console.log(error);
        })
    }

    /**
     * handles selected option from the stock select
     * @param selectedOption
     */
    handleSelect = (selectedOption) => {
        this.stockSearchChange(selectedOption.value);
    }

    render() {
        return (
            <div className="stock-search-container">
                <VirtualizedSelect
                    name="stock-search"
                    options={this.state.stocks}
                    placeholder="Type or select a stock here..."
                    onChange={this.handleSelect}
                    disabled={this.props.searchDisabled}
                    value={this.props.stock_edit_to_show}
                />
            </div>
        )
    }
}

export default StockSearch;

Answer 1

对于问题 #1，react-windowed-select 在类似情况下对我非常有用：https://github.com/jacobworrel/react-windowed-select

对于问题 #2，我发现 react-windowed-select 重绘非常快。你可以用你的数据集试验过滤器，这里有一个代码 sn-p 让你开始：

const startTime = Date.now()

// Create a 7000 element array with a bunch of content, in this case junk strings
array = [...Array(7000)].map(i => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5))
const arrayBuiltTime = Date.now()

// Filter out any string with the letter 'q' to emulate a filtering operation
const filteredArray = array.filter(i => !i.includes('q') )
const doneTime = Date.now()

// See how long it takes :-)
console.log(startTime)
console.log(arrayBuiltTime)
console.log(doneTime)

https://codepen.io/smeckman/pen/zYOrjJa?editors=1111