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

【问题标题】：How to workaround too often Redux updates in a React application?如何解决 React 应用程序中 Redux 更新过于频繁的问题？
【发布时间】：2019-09-11 07:49:00
【问题描述】：

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

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

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

【问题讨论】：

我不确定每次数据更新是否都会改变值？如果不是，也许你可以试试memoization？ reactjs.org/blog/2018/06/07/…
@tekminewe 我使用 React.PureComponent，我的意思是更改值的更新。无论如何，“减少 React 渲染时间”的方法并不总是合适的。
您是否考虑过使用去抖动功能的概念来解决这个问题？仅在经过一定的时间间隔后才将更改传递给 redux 存储，否则忽略来自后端的响应。
@remelkabir 我想过但从未使用过。请发布描述此技术的答案。
levelup.gitconnected.com/… 这可能会让您了解如何使用它。

标签： javascript reactjs performance redux

【解决方案1】：

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

在此示例中，仅在自上次更新后 1000 毫秒后才更新状态：

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

【讨论】：

在您的示例中，状态显然存储在 React 组件中（而不是 Redux 存储中）。不过我知道了，谢谢。
@Finesse 是的，这是为了反应而不是 redux，但想法是一样的。我也刚刚意识到 lastUpdate 不应该存储在状态中，因为视图不依赖它并且它是异步的

【解决方案2】：

您可以简单地解除您的处理程序的抖动。

debounced function表示它在X时间段内只能调用一次。

为了这个例子，我不会实现函数去抖动的细节，而是使用lodash。

// function that handles the server update.
const serverUpdateHandler = (dispatch) => {
  dispatch({
    type: SERVER_UPDATE
  })
}
// create a new function that is debounced. aka - will invoke after 250 milliseconds after the lace invokation
const debouncedHandler = _.debounce(serverUpdateHandler,250);
// pass socket.io the debounced function
socket.on('server-update',debouncedHandler)

【讨论】：