React-redux + Reselect + immutable.js вызов многих подключений (производительность)

Не так давно начал работать с react, и у меня проблемы с производительностью.

Я использую response + redux + Reselect + immutable.js. У меня много данных (например, большая таблица с данными ~ 10 МБ).

Моя проблема: когда у меня ~ 10 000 строк, response создает 10 000 компонентов с: отдельными connect, memoize selector.

1 строка состоит из ~ 50 ключей (из разных хранилищ, например: высота столбца, индекс фокуса), массивов и т. Д. Например, ключ title.

Когда я изменяю хранилище, например, изменяю title в строке № 123, redux выполнит 10 000 memoize selectors, сравнит результаты, и это займет ~ 1-2 секунды для 10k строк!

Как я могу предотвратить connect вызовы, если я знаю, какой именно компонент нужно повторно визуализировать? Как сигнал "компонент с id: row-123 должен запустить memoize selector и проверить изменения" или какие-то идеи?

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

P.S. Я уже думал о разбивке на страницы, виртуальной прокрутке, но мне нужно вывести все данные одновременно в DOM


reactjs redux react-redux reselect
person mixalbl4    schedule 22.07.2019    source источник
comment
вы действительно хотите нарисовать 10к компонент? может быть, использовать нумерацию страниц?   -  person François Richard    schedule 22.07.2019
comment
@ FrançoisRichard Я не буду, но должен :) Я уже думал о разбивке на страницы, виртуальной прокрутке, но мне нужно отображать все данные одновременно в DOM :(   -  person mixalbl4    schedule 22.07.2019
comment
зачем вам это ? кто может читать 10к строк одновременно? : /   -  person François Richard    schedule 22.07.2019
comment
@ FrançoisRichard по множеству причин. например: 1) для расчета суммарной высоты прокрутки (любая строка может содержать произвольную высоту, изображения с высотой. 2) Поиск с помощью F3 3) Перетащите перетаскивание от кнопки таблицы к заголовку таблицы. 4) Функциональность множественного выбора, для выбора перемещением курсора ... x) и т. Д. ... p.s. Браузер умеет это делать и работает с DOM БЫСТРО. Значит, я ограничен только редукцией   -  person mixalbl4    schedule 22.07.2019
comment
@MixerOID вы можете реализовать все эти функции, используя разбиение на страницы. Было бы НАМНОГО лучше. Для поиска вы можете добавить настраиваемый компонент поиска и назначить его фокус для F3 или просто оставить как есть - это не повредит   -  person Vasyl Butov    schedule 22.07.2019
comment
@VasylButov нет. Например, реальная высота прокрутки для всего контента работать не будет. Я не могу рассчитать это без рисования каждой строки.   -  person mixalbl4    schedule 22.07.2019
comment
пункт 1. не имеет значения (вам нужно 10k для расчета высоты 10k), пункт 2. можно (нужно?) сделать на стороне сервера с разбивкой на страницы, пункт 3, использовать разбиение на страницы + некоторые фильтры, пункт 4. то же самое, вы будете использовать фильтр никто не прокрутит 10k для множественного выбора ;;;; только мое мнение, хотя   -  person François Richard    schedule 22.07.2019
comment
@ FrançoisRichard Хорошо. Я слышала. Но задача звучит совсем иначе :(   -  person mixalbl4    schedule 22.07.2019
comment
@MixerOID вы используете Immutable.js? Это мог бы быть ваш ответ   -  person Vasyl Butov    schedule 22.07.2019
comment
@VasylButov да. Без immutable.js ситуация намного хуже.   -  person mixalbl4    schedule 22.07.2019
comment
звучит по-другому, да, но 10k строк в браузере, может быть, лучше ваше приложение просто как способ загрузки электронной таблицы, excel / libreoffice может легко сделать 10k строк   -  person François Richard    schedule 22.07.2019

Ответы (2)


arrow_upward
0
arrow_downward

Пока ваше приложение состояние обновляется, каждый подключенный компонент будет сравнивать новое и старое состояние и свойства (одно за другим), чтобы понять, требуется ли отрисовка нового компонента.

Предполагается, что эта операция также запускает селекторы, используемые для получения свойств подключенных компонентов.

connect API Redux предоставляет возможность настройки проверок перед рендерингом, предоставляя объект options со следующими пользовательскими проверками:

  • areStatesEqual
  • areOwnPropsEqual
  • areStatePropsEqual
  • areMergedPropsEqual
person Andrea Carraro    schedule 26.07.2019
comment
У меня вопрос: как предотвратить each connected component will compare new and old state and properties (one by one) в некоторых случаях. Запретить вызов всем подключается - person mixalbl4; 01.08.2019

arrow_upward
-2
arrow_downward

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

https://bvaughn.github.io/react-virtualized/#/components/List

person acbay    schedule 22.07.2019
comment
›P.S. Я уже думал о нумерации страниц, virtual scrolling ... Я уже пробовал react-virtualized - person mixalbl4; 22.07.2019
comment
Да, я прочитал ваше заявление. Но я думаю, что все ваши требования могут быть удовлетворены с помощью виртуальной прокрутки. Где именно вы столкнетесь с проблемой при попытке виртуализированного реагирования? - person acbay; 22.07.2019