Реагирование на изменения частоты в React.js/Flux

Question

У меня есть приложение, которое получает сообщения с сервера каждые 1 секунду и через socket.io эти сообщения передаются в компонент реакции.

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

Мой компонент отслеживает изменения в магазине, а затем обновляет пользовательский интерфейс при его изменении. В этом случае он рисует маркер на карте.

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

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

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

Резюмируя Я ищу:

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

То, что я думаю, что нужно сделать:

Либо:

• Избегайте ввода исходных данных в состояние магазина (на данный момент я не уверен, как объявить коллекцию, которая не является частью государства)

OR

• Сделайте мой компонент более умным относительно того, когда он перерисовывается, поэтому он не пытается перерисовывать при каждом изменении состояния.

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

Извините, если вопрос немного неясен, я новичок в реакции/флюсе. Пожалуйста, просите о любых разъяснениях.

EDIT

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

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

Answer 1

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

Однако одно место, где вы можете поставить очередь обновлений, находится между socket.io и вызывает действие.

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

Answer 2

Есть несколько способов подойти к этому:

1) Используйте shouldComponentUpdate для сравнения старых и новых реквизита реквизита, повторный рендеринг только новые состояния маркеров.

2) Переход к дереву состояний на основе курсора, который автоматически запускает рендеринг только для представлений, привязанных к определенным частям дерева состояний, которые были изменены. Я считаю, что Baobab - одна из таких библиотек. См. Также Om (написанный на ClojureScript) и, возможно, ряд других реализаций Flux.

Учитывая влияние №2, мой голос должен был пройти по маршруту №1.