响应React.js / Flux

Question

我有一个应用程序，它每隔1秒从服务器接收一次消息，并通过socket.io将这些消息广播到react组件。

我的反应组件正在使用助焊器样式架构，因此它会在收到消息时调用操作，该消息会在商店的集合中添加（或更新）记录。

我的组件监视商店的更改，然后在更改时更新UI。在这种情况下，它会在地图上绘制标记。

问题在于，由于更新的频率，我的组件每秒重绘所有标记，这是我不想要的。

我正在寻找一种方法来允许我的地图组件响应商店中集合中的更改，但不会每秒更新状态。

我以为我可以拥有原始数据的集合，然后只在我的商店中有选择地更新networkGPS集合，但该组件似乎根据商店中的任何属性进行更改，因为它们似乎都是其状态的一部分

总之，我希望：

• 以原始形式每1秒收集一次数据，并将此数据添加到商店。
• 将组件绑定到此商店中的集合，仅当更改需要重绘UI时才更新。

我认为我需要做什么：

或者：

• 避免将原始数据放入商店的状态（目前我不确定如何声明不属于该州的集合）

OR

• 让我的组件在重绘时更加聪明，因此它不会尝试重新绘制每个状态更改。

我不确定哪个是最合适的解决方案，任何信息都会感激不尽。

很抱歉，如果这个问题有点不清楚，我会做出新的反应/变化。请确认要求任何澄清。

修改

目前我通过存储项目数组（本例中的地图标记）来解决这个问题，我希望我的组件显示在组件本身:( 当状态改变并且调用render时，我拦截状态属性，决定是否需要在标记集合中进行任何更改，并且只在需要时修改它们。如果不需要更改，则组件中的集合保持不变，并且不执行重绘。

这不理想，我觉得我应该能够让我的组件只响应特定的状态变化，但我还没有找到它，仍在寻找更好的答案。

Answer 1

有几种方法可以解决这个问题：

1）使用shouldComponentUpdate比较旧道具和新道具，仅重新渲染新标记状态。

2）切换到基于游标的状态树，该状态树仅对绑定到已更改的状态树的特定部分的视图自动触发渲染。我相信Baobab就是这样一个图书馆。另请参阅Om（用ClojureScript编写）以及其他一些Flux实现。

考虑到＃2的影响，我的投票将是＃1的路线。

Answer 2

我不太清楚你每秒钟都会遇到什么问题。

但是，您可以对更新进行排队的位置是在socket.io和调用操作之间。

除了每秒调用一次操作外，您还可以在发送更新之前对更新进行排队以进行响应。