现在生产环境有一个需求,根据各传感器(约200个)历史数据进行图形可视化
我采用的库是Echarts,实际操作中遇到了以下问题:
同时渲染所有图,难以实现(数据库API需要调用200次,消耗过大),就算通过一次API的批量查询,得到数据后数据过大,react周期结束也不会时时刷新界面;
现还是采用分开渲染,图表组件复用200次,各自调用API,理想状况是实现懒加载或者瀑布流界面
后台异步渲染,达到更好的页面体验
问题来了:我这两百个图表组件如何实现异步渲染,达到瀑布流及懒加载效果?
我react比较菜,请教各位如何实现?
点击右侧采纳即可:
分块加载:每次加载一部分图表组件,当用户滚动到底部时再加载剩余图表组件。这可以通过在用户滚动事件中监听页面滚动高度,从而决定是否加载下一部分图表组件。
预加载:可以通过预加载下一个图表组件来实现懒加载效果。这可以通过使用 IntersectionObserver API 实现,该 API 可以帮助您监听页面元素是否在用户视野中。当图表组件即将进入用户视野时,你可以在后台加载该图表组件并显示在页面上。
懒加载组件:可以用现有的 React 懒加载组件,如 react-lazy 和 react-window。这些组件可以帮助你实现类似于预加载的功能,并且已经封装了一些常见的实现细节,更加方便地实现懒加载。
react 初学者,建议分块加载和预加载方法,因为它们的实现相对简单,并且可以帮助您更好地理解 react 的工作原理。