时间戳

首页 > 解决方案 > 限制连接组件中的 MapStatetoProps 调用

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

问题描述

我有一个带有 Redux 存储的 React 应用程序，它连接到 websocket 并在表格中向用户显示信息。我有 RxJs 中间件，它连接到 websocket 并使用内容调度操作。然后那些在减速器中被拾起并保存到我的状态。然后我 mapStateToProps 在我的 React 组件中显示数据。

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

标签： reactjsreduxreact-reduxrxjs

解决方案

问题是 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);

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

推荐阅读