大树性能
大树组件的难点不是绘制单个节点,而是展开、折叠、搜索、滚动和选中状态会影响大量节点。
关键策略
- 只把可见展开路径扁平化。
- 大量子节点分批展开。
- 搜索时保留展开状态,不要无意义重建整棵树。
- 滚动到顶部或底部后阻止滚轮继续冒泡到外层容器。
- 文本溢出显示省略号,hover 显示完整 tooltip。
分批展开
如果一个节点有几千个子节点,点击展开不应一次性创建所有可视节点。可以按批次加载子节点,先显示一批,再继续异步补充。
expand node
-> show first batch
-> schedule next batch
-> keep UI responsive
选中和滚动
选中节点滚出视窗后,hover 和 click 命中仍必须基于当前滚动偏移。不要使用未扣除 scroll offset 的旧坐标。
复制
调试类树组件应支持复制当前节点路径和值。数组路径建议使用 items[0],不要输出 items.0。
使用建议
- 业务树节点要有稳定 key。
- 展开状态用 key 集合保存,不要依赖节点对象引用。
- 大树搜索要限制频率,可以 debounce。
- 节点 label 渲染不要每帧重新分词或测量全文。