Reactjs 将React组件作为道具传递时构造Immutable.js数据的正确方法

在具有flux架构的react web应用程序中，我尝试使用Immutable.js来存储数据，以利用快速的shouldComponentUpdate比较

我有一个存储，它保存一个不可变的消息映射，然后是一个通道组件，它显示与该通道关联的所有消息。假设我将状态设置为：

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

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

然后我渲染通道，如下所示：

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

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

而在幕后，它只会返回特定的地图，直到添加新的消息后才会改变

或者，将所有消息传递给通道组件并在其内部执行过滤是否更有意义

---

我倾向于改变存储中数据的结构，但我想知道我是否遗漏了一些过滤功能的工作方式。

在频道组件中，您将再次将消息分发到几个子消息组件中。重新渲染成本依次分布在每个子组件上。如果它们也是“纯的”，那么再次调用通道组件的渲染就无关紧要了。只有真正更改的消息才会再次呈现，因为在过滤器返回的新迭代器中，底层消息对象仍然是相同的，除非它们已更改

但是，如果仍要避免渲染，可以重新建模数据以将消息存储在特定于通道的映射中，也可以在存储中缓存过滤器迭代器，并在每次

getMessages

调用中不断返回相同的消息。在改变消息的操作中，将缓存的引用更改为新值。这样，如果消息没有更改，您将始终得到相同的迭代器