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

EN

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

下面的信息只是完整理解的额外背景。

最后，总体问题是如何通过使用react useEffect钩子消除阿波罗客户端graphql订阅来减少highcharts的重新渲染

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

假设我有一个ui组件，比如highcharts (concrete with react-highcharts-official )图表，它有很长的重渲染重绘时间，但能够同时应用多个更改。因此，我喜欢通过合并和去抖动来减少重绘，这样它就可以立即更新。

使用react钩子在一定的持续时间内收集数据的最聪明的方式是什么?例如，在一些数据到达后，将每次响应的滑动窗口延长200ms，但最多将其延长到1s。正在进行重绘时，请勿开始另一次重绘。因此，如果新数据到达，图表最多每秒重绘一次，但如果较长时间没有数据到达，则更早重绘。将所有更改应用于Highcharts并一次呈现所有内容。

对于angular和rxjs，我会用Chart.setData( mergeMap，false)为Highcharts提供每个数据，以提供数据而不需要重新渲染。如果我想随着时间的推移收集数据，我会使用buffer。此外，还会订阅一次去跳跃，在200ms后重新绘制图表(或发出缓冲区)，没有新数据，但最新的每隔1秒重新绘制一次。