Question

在具有磁通体系结构的反应式网络应用程序中，我试图使用Immutable.js存储数据以利用快速的shouldComponentUpdate比较。

我有一个商店，其中包含一个不可变的消息地图，然后是一个显示与该频道相关的所有消息的频道组件。让我们说我设置这样的状态：

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

然后我像这样渲染频道：

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

频道无法在不检查每条消息的情况下进行快速比较，因为根据我的理解，过滤器功能总是返回一个新对象。

如果消息没有改变，过滤器是否可以在每次调用时返回相同的底层对象？

或者我应该只重构我的数据，以便在MessageStore消息中存储每个通道的单独映射。那样我就可以：

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

在幕后，它只会返回在添加新消息之前不会改变的特定地图。

或者将所有消息传递给通道组件更有意义，它会在内部执行过滤吗？

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

Answer 1

在频道组件中，您将再次在多个子消息组件中分发消息。重新渲染成本依次分布在每个子组件上。如果它们也是“纯粹的”，那么再次调用 Channel 组件的渲染几乎不重要。只有真正更改的消息才会再次呈现，就像在过滤器返回的新迭代器中一样，除非它们已经更改，否则基础消息对象仍然是相同的。

但是，如果您仍想避免渲染，可以重新构建数据以在特定于通道的映射中存储消息，或者在商店中，您可以缓存过滤器迭代器并在每个{{1调用。在改变消息的操作中，将缓存的引用更改为新值。这样，如果消息没有改变，你将始终获得相同的迭代器。