2016-12-11 11 views
1

Однонаправленный поток данных (Flux), поскольку я понимаю, как его использовать, кажется, не подходит для конкретного варианта использования. У нас есть SPA, который отображает список из нескольких сотен записей календаря за весь месяц. Каждая запись суммирует несколько деталей.Однонаправленный поток данных: облегчение переделки при работе с огромным списком предметов?

Пользовательский интерфейс позволяет пользователю развернуть запись, нажав на нее, чтобы просмотреть дополнительные сведения. Это простой вопрос о переключении бит expanded на запись в модели.

Часть потока, которая беспокоит меня, заключается в том, что для каждого действия пользователя требуется весь повторный рендеринг модели представления, который затем согласовывается с DOM. Таким образом, чтобы переключить бит на одну запись из нескольких сотен триггеров, нужно немного переработать, регенерировав сотни других записей, в которые не были внесены изменения, чтобы учесть изменение на одном.

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

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

ответ

1

Библиотека React-Перевождь обеспечивает connect функцию, которая генерирует компоненты оболочки, которые обрабатывают подписываясь на магазин Redux. connect реализует лот оптимизаций, чтобы гарантировать, что завернутый компонент только повторно отображает, когда это действительно необходимо. Также есть некоторые конкретные шаблоны, которые вы можете использовать для оптимизации повторного рендеринга. Главное состоит в том, чтобы связанный компонент списка передавал идентификаторы элемента связанным дочерним элементам, которые просматривают свои собственные данные с использованием этого идентификатора. Наконец, memoized «селекторные» функции, обычно созданные с помощью библиотеки Reselect, могут помочь сократить и повторное рендеринг.

Redux Performance раздел моего React/Redux links list содержит ряд статей по этой теме, равно как и Redux FAQ question on "scaling Redux". Статья "High Performance Redux" особенно информативна, и на этой неделе был также good performance benchmark comparing Redux vs MobX.