1、发生背景 : Antd3异步加载tree组件。由于3中没有虚拟滚动条height,则在tree组件外套了div 然后overflow:auto控制树的上下滚动。
2、遇到问题: tree组件的最外层数节点数据相对较大有200+左右,如果在涉及异步展开子节点等等,数据量大造成界面非常的卡顿
3、操作环境、软件版本: React 16.8 Antd 3.26
4、尝试过的解决方法 :
尝试过 antd 3 4 共存,使用antd4组件中的虚拟滚动条height,但是由于项目的问题,引入过程中出现大量不兼容、报错等问题,现仍在尝试
我想要达到的结果: 卡顿的根本原因在于页面dom节点过多导致,4中的tree貌似引用了虚拟列表的概念,回收可视区域外的dom节点。求个好方法来解决界面卡顿
自己做个懒加载,根部原因就是一次性加载太多数据导致的,从这方面入手即可,或者接口拆出一部分,可以点击子类的时候再掉一次接口