react框架一次渲染200个图表

现在生产环境有一个需求,根据各传感器(约200个)历史数据进行图形可视化

我采用的库是Echarts,实际操作中遇到了以下问题:

  1. 同时渲染所有图,难以实现(数据库API需要调用200次,消耗过大),就算通过一次API的批量查询,得到数据后数据过大,react周期结束也不会时时刷新界面;

  2. 现还是采用分开渲染,图表组件复用200次,各自调用API,理想状况是实现懒加载或者瀑布流界面
    后台异步渲染,达到更好的页面体验

问题来了:我这两百个图表组件如何实现异步渲染,达到瀑布流及懒加载效果?
我react比较菜,请教各位如何实现?

点击右侧采纳即可:

分块加载:每次加载一部分图表组件,当用户滚动到底部时再加载剩余图表组件。这可以通过在用户滚动事件中监听页面滚动高度,从而决定是否加载下一部分图表组件。

预加载:可以通过预加载下一个图表组件来实现懒加载效果。这可以通过使用 IntersectionObserver API 实现,该 API 可以帮助您监听页面元素是否在用户视野中。当图表组件即将进入用户视野时,你可以在后台加载该图表组件并显示在页面上。

懒加载组件:可以用现有的 React 懒加载组件,如 react-lazy 和 react-window。这些组件可以帮助你实现类似于预加载的功能,并且已经封装了一些常见的实现细节,更加方便地实现懒加载。
react 初学者,建议分块加载和预加载方法,因为它们的实现相对简单,并且可以帮助您更好地理解 react 的工作原理。

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^