2016-01-09 3 views
2

В ответном веб-приложении с архитектурой потока я пытаюсь использовать Immutable.js для хранения данных, чтобы использовать быстрые сравнения toComponentUpdate.Правильный способ структурирования данных Immutable.js при передаче React Components в качестве реквизита

У меня есть хранилище, которое содержит неизменяемую карту сообщений, а затем компонент канала, который отображает все сообщения, связанные с каналом. Скажем, я установить состояние, как это:

this.state.messages = MessageStore.getMessages() 
    .filter(message => { message.channelId === currentChannelId}); 

Тогда я сделать канал, как это:

<Channel messages={this.state.messages}/> 

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

Возможно ли, чтобы фильтр возвращал один и тот же базовый объект при каждом вызове, если сообщения не изменились?

Или мне нужно просто реструктурировать свои данные, чтобы в сообщениях MessageStore хранились отдельные карты для каждого канала. Таким образом, я мог бы просто:

this.state.messages = MessageStore.getMessages(currentChannelId); 

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

Альтернативно, имеет смысл просто передать все сообщения компоненту канала, и он будет выполнять фильтрацию внутри себя?

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

ответ

1

Внутри компонента Канал, вы снова будете распространять сообщения через несколько детей. Сообщение Компоненты. В свою очередь стоимость повторного рендеринга распределяется по каждому дочернему компоненту. Если они также «чисты», то вряд ли имеет значение, что визуализатор компонента канала вызывается снова. Только по-настоящему измененные сообщения будут отображаться снова, так как в новом итераторе, возвращаемом фильтром, базовые объекты сообщения будут оставаться теми же, если они не изменились.

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

Смежные вопросы