Как исправить задержку на элементе выбора, содержащем большой список опций

Question

У меня есть приложение реагирования, которое использует пользовательский интерфейс реагирования, я использую пример автозаполнения react-select, который вы можете найти здесь.

https://material -ui.com / components / autocomplete /

Когда количество элементов в выборе велико, например около 2500, оно отстает и становится непригодным для использования.

Я изменил исходное демо, чтобы предложить варианты длины 2500 для заполнения выбора.

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

Пожалуйста, посмотрите демонстрационный пример моей проблемы ниже.

https://codesandbox.io/s/material-demo-vp59j

Когда вы нажимаете первый селектор, он очень запаздывает.

Answer 1

Вы должны использовать react-window для этой цели.https://github.com/bvaughn/react-window

Это библиотека для эффективной визуализации больших списков и табличных данных.

Вот рабочая демонстрация с большим количеством записей для показа.Это не отстает https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-bbtz0

PS: Это один из ключевых ребят в команде реагирования на Facebook.