reactjs - 限制连接组件中的 MapStatetoProps 调用

Question

我有一个带有 Redux 存储的 React 应用程序，它连接到 websocket 并在表格中向用户显示信息。我有 RxJs 中间件，它连接到 websocket 并使用内容分派(dispatch)操作。那些然后在 reducer 中被拾取并保存到我的状态。然后我使用 mapStateToProps 来显示我的 React 组件中的数据。

问题是更新速度比渲染速度快。我每秒可以获得 50 次更新，如果每次数据进入我的应用程序时我都进行渲染，我的应用程序的性能会很糟糕。我需要一种方法来限制调用 mapStatetoProps 的次数。我有很多组件映射到此状态，截至目前，我在 shouldComponentUpdate 中为每个组件设置了 1 秒限制。如果我可以在较低级别设置每秒一次的 throttle 以避免在我的每个组件之间出现重复逻辑，那会更好。我也不能丢弃我每秒收到的 50 条消息中的任何一条，只获取最新消息，因为用户需要的数据分布在每条消息中。有什么想法吗？

Answer 1

问题是 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 存储中的消息数组中。

然后在您的组件中，您只需像这样 mapStateToProps:

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

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