渲染大批量数据的解决方案(不通过懒加载)

227 阅读1分钟

由于到项目实时性,大批量数据,复杂性等。综合考虑没有使用antd给的Tree组件。

1.由于组件是Tree类型,但是目前接口只能支持通过父节点才能查询到字节点,过滤相同的父节点,通过node批量调用字节点接口(由于浏览器promise同时的限制,所以用node同时查询),数据全部返回后填充成Tree类型数据

2.使用虚拟滚动(react-virtualized),数据量过大,防止页面卡顿

3.大批量勾选会计算节点到底是全选还是半选状态,

4.通过webWorker来控制车辆的状态(在线,离线。报警等)防止主线程卡死

5.通过indexDB来存储树,页面切换进行缓存,

调用接口:

计算节点到底是全选还是半选状态

通过webWorker来控制车辆的状态,不能频繁调用set来进行更新,所以通过requestAnimationFrame来操作dom进行更新状态更新

考虑成本问题,许多复杂计算放到了前端,按照目前的数量,项目不会卡死,使用正常