javascript - 如何解决 React 应用程序中 Redux 更新过于频繁的问题？

Question

我有一个采用 React-Redux 架构的浏览器应用程序。应用程序中会发生许多事件(例如超时、网络套接字传入消息、网络 worker 消息、XHR 响应等)。每个事件都会发出一个 Redux 操作，该操作会更改导致 React 渲染的 Redux 存储。

问题在于事件发生的频率太高，以至于 React 没有足够的时间来渲染 UI(例如，事件每 5 毫秒(或更频繁)发生一次，而 React 需要 10 毫秒来渲染 UI)。它使整个页面停止响应，因为渲染过程不会停止(它总是有东西要渲染)并且浏览器没有时间绘制 DOM 或处理 DOM 事件。

考虑到我既不能减少事件频率也不能减少 React 渲染时间，有什么方法或现成的解决方案可以解决这个问题？

Answer 1

当您从 websocket 消息更新状态时，记录时间，并且仅在自那时起经过一定时间后才进行另一次更新。

在此示例中，仅当自上次更新以来已过去 1000 毫秒时才会更新状态:

client.onUpdate(data => {        
    if (!this.lastUpdate || 
        new Date().getTime() - this.lastUpdate.getTime() > 1000) {
        this.setState({ data });
        this.lastUpdate = new Date();
    }
})