反应选择非常大的选项列表

Question

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

1)在搜索参数中键入内容时，加载速度太慢。

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

对于问题 1，我试图利用 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，在类似情况下，反应窗口选择对我来说非常有用： https://github.com/jacobworrel/react-windowed-select

对于问题 #2，我发现反应窗口选择重绘的速度非常快。您可以尝试使用数据集进行筛选器，以下是帮助您入门的代码片段：

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