使用react-virtualized-select的搜索列表很慢

时间:2018-11-13 17:45:00

标签: reactjs react-virtualized

我有一个很大的列表(约10,000个项目),我正在使用react-virtualized-select来呈现可搜索的下拉列表。将根据用户类型搜索这些项目(默认的“行为-虚拟-选择”行为)。

建议在这里

react-virtualized-select:Big list performance with React

尽管react-virtualized-select是专门为此目的设计的,但我仍然发现性能不佳。我是否缺少可以优化性能的措施? (除了减少列表中的项目)。

看看Chrome性能工具,似乎stripDiacrtics(?)和实际的过滤(filterOptions)占用了大部分时间,就像这么大的列表所期望的那样。

enter image description here

{
 insertId:  "000000-6dbc4c0f-fe15-4260-95c6-10afe7d0960b"  
 labels: {…}  
 logName:  "projects/mydemo-221920/logs/cloudfunctions.googleapis.com%2Fcloud-functions"  
 receiveTimestamp:  "2018-11-13T17:27:48.429240186Z"  
 resource: {…}  
 severity:  "INFO"  
 textPayload:  "My log  PubSub en String est: {"Member_ID":881230,"First_Name":"Dave2","Last_Name":"Manin2","Gender":"M","Age":53,"Height":"5,2","Weight":145,"Hours_Sleep":4,"Calories_Consumed":2497,"Exercise_Calories_Burned":876,"Date":"2018-10-17"}"  
 timestamp:  "2018-11-13T17:27:42.143Z"  
 trace:  "projects/mydemo-221920/traces/cef3531fe182bf1d6da6e47aae3bbff3"  
}

示例: https://afisher88.github.io/virtualized-select-test/

0 个答案:

没有答案