如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？

如何解决如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？

如何使用 react-hooks (useEffect) 缓冲流数据，以便能够一次更新另一个组件以避免多次重新渲染？

以下信息只是完整理解的附加背景。

最后的总体问题是如何通过使用 react useEffect 钩子消除 Apollo-Client graphql 订阅来减少 highcharts 重新渲染

我正在使用 apollo-client 构建一个用于数据加载的 React 应用程序。我使用 graphql 订阅，因为数据是惰性的，并且实时更新，因此新数据可以流式传输。目前我正在使用 useEffect，它为每个新数据到达调用一次。

假设我有一个 ui 组件，如 highcharts（带有 react-highcharts-official wrapper 的具体 HighStock）图，它具有很长的重新渲染重绘时间，但能够一次应用多个更改。因此，我喜欢通过合并和去抖动来减少重绘，以便立即更新。

使用 react 钩子在特定时间内收集数据的最聪明方法是什么，例如在某些数据到达后将每个响应的滑动窗口延长 200 毫秒，但最多将其延长到 1 秒。当重绘正在进行时，不要开始另一次重绘。因此，如果有新数据到达，图表最多每秒重绘一次，但如果长时间没有数据到达，则更早。将所有更改应用到 Highcharts 并立即渲染。

使用 angular 和 rxjs，我会制作一个 mergeMap 将每个数据提供给 Highcharts，并使用 Chart.setData(data,false) 提供数据而无需重新渲染。如果我会随着时间的推移收集数据，我会使用缓冲区。另外会订阅 debounce 和 trottle 以在大约 200 毫秒后没有新数据但最近每 1 秒重绘一次图表（或发出缓冲区）。

解决方法

这是您描述的问题的再现：

https://codesandbox.io/s/highcharts-react-demo-forked-gtdys?file=/demo.jsx

在这种情况下，我认为最好的解决方案是在数组中保留新点，并在一秒后使用单独的间隔添加它们。