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

Posted 2023-03-10

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

【英文标题】：How do I buffer streamed data with react-hooks (useEffect) to be able to update another component at once to avoid many rerenderings?

【发布时间】：2021-06-14 06:11:28

【问题描述】：

如何使用 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 毫秒后，将订阅去抖动和小跑以重绘图表（或发出缓冲区）。

【参考方案1】：

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

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

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

【讨论】：

嗨 Sebastian，感谢这个伟大的提议和创建代码框。对我来说，这是第一个解决方案，但还不是完美的解决方案，因为如果没有更多数据来，我希望渲染得更快，并且至少每秒渲染一次。如果没有必要，我也想避免每秒重新渲染。因此，在 rxjs 缓冲区上放置一个 debounce 和 throttle 作为发射器可能是一个非常好的解决方案，但是我不知道如何将它集成到 react 组件渲染生命周期中。