我有一个选择组件,需要处理大约 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;
对于问题#1,react-windowed-select 在类似情况下对我非常有用:https://github.com/jacobworrel/react-windowed-select
对于问题#2,我发现react-windowed-select 重绘速度非常快。您可以使用数据集尝试过滤器,这里有一个代码片段可以帮助您入门:
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)