如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？
以下信息只是完整理解的附加背景。
最后，总体问题是如何通过使用 react useEffect 钩子去抖动 Apollo-Client graphql 订阅来减少 highcharts 重新渲染
我正在使用 apollo-client 构建一个反应应用程序来加载数据。我使用 graphql 订阅，因为数据是惰性的，并且会实时更新，因此可以流式传输新数据。目前我正在使用 useEffect ，它为每个到达的新数据调用一次。
假设我有一个 ui 组件，例如 highcharts（带有 react-highcharts-official 包装器的具体 HighStock）图，它具有较长的重新渲染重绘时间，但能够一次应用多个更改。因此，我喜欢通过合并和去抖动来减少重绘，因此它会立即更新。
什么是反应钩子在一定时间内收集数据的最聪明的方法，例如在某些数据到达后将每个响应的滑动窗口延长 200 毫秒，但最多将其延长到 1 秒。在进行重绘时，不要开始另一次重绘。因此，如果有新数据到达，则最多每秒重绘一次图表，但如果较长时间没有数据到达，则更早。将所有更改应用到 Highcharts 并一次性渲染。
使用 angular 和 rxjs，我将创建一个 mergeMap 以使用 Chart.setData(data, false) 将每个数据提供给 Highcharts 以提供数据而无需重新渲染。如果我要随着时间的推移收集数据，我会使用缓冲区。此外，在没有新数据但最近每 1 秒重绘 200 毫秒后，将订阅去抖动和小跑以重绘图表（或发出缓冲区）。