将 Immutable.js 数据作为 props 传递给 React Components 时的正确构造方法

Question

在具有通量架构的 React Web 应用程序中，我尝试使用 Immutable.js 来存储数据以利用快速 shouldComponentUpdate 比较。

我有一个商店，其中包含一个不可变的消息映射，然后是一个显示与该频道关联的所有消息的频道组件。假设我这样设置状态：

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

然后我这样渲染通道：

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

如果不检查每条消息，频道将无法进行快速比较，因为据我所知，过滤器函数总是 return 一个新对象。

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

或者我是否应该重组我的数据，以便在 MessageStore 中，消息存储在每个频道的单独映射中。这样我就可以拥有：

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

在幕后，它只是 return 在添加新消息之前不会更改的特定地图。

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

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

Answer 1

在 Channel 组件中，您将再次在多个子 Message 组件之间分发消息。 re-render 成本依次分布在每个子组件中。如果它们也是 "pure"，那么再次调用 Channel 组件的渲染就无关紧要了。只有真正更改的消息才会再次呈现，因为在过滤器返回的新迭代器中，底层消息对象将仍然相同，除非它们已更改。

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

将 Immutable.js 数据作为 props 传递给 React Components 时的正确构造方法

Proper way to structure Immutable.js data when passing to React Components as props

reactjs

immutable.js