Question

我有一个带有Redux存储的React应用程序，该存储连接到Websocket，并在表中向用户显示信息。我有RxJs中间件，该中间件连接到websocket并使用内容调度动作。然后将它们放在减速器中并保存到我的状态。然后，我将mapStateToProps显示在我的React组件中。

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

Answer 1

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

因此，您需要缓存结果，然后每n秒将缓存的消息推送到messages数组中，然后清除缓存。

它看起来像这样。

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存储中的messages数组中。

然后在您的组件中将mapStateToProps像这样：

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

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

连接组件中的节流MapStatetoProps调用

1 个答案: