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

大佬教程收集整理的这篇文章主要介绍了如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？的解决方法建议，希望对你解决如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？有所启发或帮助；

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

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

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

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

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

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

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

解决方法

大佬总结

以上是大佬教程为你收集整理的如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？全部内容，希望文章能够帮你解决如何使用 react-hooks (useEffect) 缓冲流数据以便能够一次更新另一个组件以避免多次重新渲染？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。