Reactjs 已连接组件中的Throttle MapStateTops调用

我有一个React应用程序，它带有一个Redux存储，连接到websocket并在表中向用户显示信息。我有一个RxJs中间件，它连接到websocket并用内容发送操作。然后在减速器中取出，保存到我所在的州。然后，我映射StateToprops以显示React组件中的数据

---

问题是更新的速度比渲染的速度快。我可以每秒更新50次，如果每次数据进入我的应用程序时我都进行渲染，那么我的应用程序性能将非常糟糕。我需要一种方法来限制调用mapStatetoProps的次数。我有很多组件映射到这个状态，现在我在shouldComponentUpdate中为每个组件设置了1秒的节流。如果我可以在较低的级别上设置每秒一次的油门，以避免在我的每个组件上都有重复的逻辑，那就更好了。我也不能删除每秒收到的50条消息中的任何一条，而只获取最近的消息，因为用户需要的数据分布在每条消息中。有什么想法吗？

问题是redux存储每秒更新50多次，因此组件每秒渲染50多次。您只希望存储每n秒更新一次，但不会丢失任何数据。这是高频数据中的常见问题；通常，解决方案是使用缓存

因此，您需要缓存结果，然后每隔

n

秒将缓存的消息推送到消息数组中，然后清除缓存

它看起来像这样

your_websocket.on("new_message", message =>
  dispatch({ action: "ADD_TO_CACHE", message })
);

setInterval(() => {
    dispatch({ action: "PUSH_CACHE_TO_STATE" });
}, 1000);

const your_reducer = (state, action) => {
    /* -- snip -- */
    case "PUSH_CACHE_TO_STATE":
        newState.messages.push(...newState.messageCache);
        newState.messageCache = [];
        return newState;
    case "ADD_TO_CACHE":
        newState.messageCache.push(action.message);
        return newState;
}

这将把每一条新消息推送到缓存中，然后每隔1000毫秒缓存将被清除并推送到redux存储中的消息数组中

然后，在您的组件中，您只需映射StateToprops，如下所示：

connect(store => ({ messages: store.messages }))(YourComponent);

---

并且您的组件只会在每次更新消息时（每秒一次）重新呈现。

AFAIK您不能限制/取消取消取消状态到道具的映射，但您可以取消或“收集”已调度的操作以更新状态，基本上是从websocket发送一批更新，而不是试图单独发送一批更新。这主意不错。我将尝试类似的方法，看看是否有帮助。很好的解决方案，不过我认为

ADD_TO_CACHE

操作应该推入缓存数组，而不是messages数组

newState.messageCache.push（action.message）。由于它是一个减缩器，所以总是返回一个新的数组对象，即
返回{…state，messageCache:[…state.messageCache，action.message]}。但这段代码可能假设在reducer函数中全局创建了一个“newstate”对象，而不考虑操作。这是我的错别字。会改变的。