现状
一个页面约20个图，每个图最大数据量5000-10000个数据点，所有数据通过一个接口一次性返回，每次获取数据loading时间很长，渲染后移动鼠标页面严重卡顿
优化手段
- 图表组件使用shouldComponentUpdate生命周期对比前后两次props和state，严格控制当前组件实例的是否更新
- 使用ref存储图表列表参数常量，减少状态管理造成的非必要更新，数据回来后只对当前项数据做计算并赋值给状态管理
- 并使用promise.race和promise.allSettled方法封装并发请求数控制器，将一次性获取数据方法优化成每个图表发一个请求，限制为当前一屏（6个）的图表数量，且在每个请求执行响应后立马渲染对应的图表，使用浅拷贝方式进行合并到已回来的数据集保存，保证当前请求响应数据不影响已渲染的图表
- 列表里每个图给定对应的key属性做优化，将页面整体loading修改为每个图一个小Loading包裹在里面固定大小占位，减少回流重绘
优化结果
多个请求单独发出，各自loading和渲染，鼠标移动页面无卡顿，比较流畅
知识点
- 使用ref存储不影响渲染的数据
- 列表组件里key的作用
- class组件里shouldComponentUpdate生命周期的作用
- 使用promise.race和promise.all / promise.allSettled限制并发数
- 引用类型数据作为参数
- 回流重绘、BFC等
还能优化的点
- 使用的promise.all / promise.allSettled方法请求的限制里的数据，如果并发限制为4，那么最后4个请求就需要全部请求完才会一起返回，没有像前面的请求一样，每个请求完了立马渲染，这点可以优化为都使用promise.race，每次有结果了删除有结果的这一项
- 可以将数据的请求和图表封装到一起，只需要传入初始参数，后续图表内部数据的请求和渲染都不会影响到同级的其他图表
- 如果图表数量不确定，可以仅加载一屏多一行的图表，然后滚动滚动条后再加载下一屏，或者使用虚拟列表来渲染
敬请补充指点~
