Как исправить производительность сортируемого редактируемого списка в Redux - PullRequest
0 голосов
/ 26 июня 2018

My List отображает множество ListItems (используя react-list для уменьшения числа на странице).

В ListItems имеются редактируемые текстовые области, которые обновляют listItems часть моего магазина редуксов при каждом нажатии клавиши.

List получает массив ListItem идентификаторов в mapStateToProps на основе некоторых критериев сортировки. Он многократно повторяет это действие, потому что state.listItems обновляется при каждом нажатии клавиши.

Чтобы попытаться бороться с повторениями, я использую , повторно выбрав , но, учитывая, что state.listItems является одним из входных данных для селектора, он на самом деле не кешируется, поскольку он меняется при каждом нажатии клавиши. Чтобы бороться с ЭТОМ при каждом нажатии клавиш, я теперь отображаю все элементы ListItems и беру их идентификаторы (и некоторые другие вещи, необходимые для критериев сортировки), а затем передаю это в селектор, который выполняет проверку deepEquals перед сортировкой и кэшированием. .

Это улучшило производительность, но все еще немного запаздывает при наборе с очень большими списками.

Проблема в том, что он по-прежнему отображает все ListItems при каждом нажатии клавиши.

Единственное решение, которое я могу придумать, - это сохранить массив идентификаторов ListItem где-нибудь еще в магазине и обновлять его каждый раз, когда кто-то добавляется или удаляется. Но это кажется раздражающим, поскольку это действительно производные данные. Или отсоедините мою текстовую область от магазина, сделайте ее неконтролируемым вводом, чтобы он обновлял магазин реже. Не идеально, так как есть некоторые другие вещи, которые прислушиваются к тем изменениям, которые необходимо обновить, когда пользователь печатает.

Я видел несколько других вопросов аналогичного характера, касающихся использования повторного выбора для массивов объектов, но, похоже, нет ответов на правильное решение.

Есть идеи?

1 Ответ

0 голосов
/ 26 июня 2018

возможно, одним из решений может быть debounce ваш обработчик события нажатия клавиши.

...