react框架一次渲染200个图表

Question

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

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

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

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

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

Answer 1

点击右侧采纳即可：

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

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

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