我有一个应用程序,它每 1 秒从服务器接收消息,并通过 socket.io 将这些消息广播到反应组件。
我的 React 组件使用的是 Flux 风格的架构,因此它会在收到一条消息时调用一个动作,该消息会在商店的集合中添加(或更新)一条记录。
我的组件监视商店中的更改,然后在更改时更新 UI。在这种情况下,它会在地图上绘制一个标记。
问题是由于更新的频率,我的组件每秒重绘所有标记,这是我不想要的。
我正在寻找一种方法来允许我的地图组件响应商店中集合中的更改,但不会每秒更新状态。
我以为我可以收集原始数据,然后只在我的商店中选择性地更新 networkGPS 集合,但是该组件似乎会根据商店中的任何属性而改变,因为它们似乎都是其状态的一部分。
总之,我希望:
- 每 1 秒以原始形式收集数据并将此数据添加到存储中。
- 将一个组件绑定到此商店中的一个集合,我仅在更改需要重新绘制 UI 时才更新该集合。
我认为我需要做的:
任何一个:
- 避免将原始数据放入商店的状态(目前我不确定如何声明不属于状态的集合)
或者
- 让我的组件在重绘时更加聪明,因此它不会尝试在每次状态更改时重绘。
我不确定哪个是最适合该问题的解决方案,任何信息将不胜感激。
抱歉,如果问题有点不清楚,我是新来的反应/通量。请务必要求任何澄清。
编辑
目前,我通过存储项目数组(本例中的地图标记)来解决这个问题,我希望我的组件显示在组件本身中:(当状态更改并调用渲染时,我拦截状态属性,决定是否需要更改标记集合中的任何内容,并且仅在需要时对其进行修改。如果不需要更改,则组件中的集合保持不变并且不执行重绘。
这并不理想,我觉得我应该能够让我的组件只响应特定的状态变化,但我还没有找到它,仍在寻找更好的答案。