仪表盘场景的前端优化

仪表盘场景的前端优化

摘要

这篇文章介绍了一个中台系统中仪表盘页面的设计思路。仪表盘由不同的图表卡片组成，支持多种类型的图表展现。为了实现动态添加、删除和编辑卡片的功能，将仪表盘信息分为仪表盘和卡片两个实体，并约定了两类接口供前端使用。前端代码实现简单，通过一个自治的思想，仪表盘组件只负责摆放卡片，而卡片的加载、查询和渲染由卡片自己负责。使用了react-refetch类库来简化数据加载过程。然而，这种自治的解决方案在某些情况下导致仪表盘页面卡死或交互滞后的问题。原因是某些仪表盘的卡片数量较多且需要渲染大量数据，导致页面性能下降。