1

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

我的 React 组件使用的是 Flux 风格的架构,因此它会在收到一条消息时调用一个动作,该消息会在商店的集合中添加(或更新)一条记录。

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

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

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

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

总之,我希望:

  • 每 1 秒以原始形式收集数据并将此数据添加到存储中。
  • 将一个组件绑定到此商店中的一个集合,我仅在更改需要重新绘制 UI 时才更新该集合。

我认为我需要做的:

任何一个:

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

或者

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

我不确定哪个是最适合该问题的解决方案,任何信息将不胜感激。

抱歉,如果问题有点不清楚,我是新来的反应/通量。请务必要求任何澄清。

编辑

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

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

4

2 回答 2

2

There are a couple of ways to approach this:

1) Use shouldComponentUpdate to compare old props and new props, re-rendering only the new marker states.

2) Switch to a cursor-based state tree that automatically triggers renders only for views that are bound to the specific parts of the state tree that have changed. I believe Baobab is one such library. See also Om (written in ClojureScript) and probably a number of other Flux implementations.

Given the impact of #2 my vote would be to go the route of #1.

于 2015-09-21T16:47:31.767 回答
1

我不太确定您每秒更新时面临的问题是什么。

但是,您可以将更新排队的一个地方是在 socket.io 和调用操作之间。

您可以在将更新发送到响应之前将更新排队,而不是每秒调用一次操作。

于 2015-09-21T13:10:01.793 回答