跳到主要内容

认识

2024年04月15日
柏拉文
越努力，越幸运

一、认识​

二、方案​

2.1 递归方案​

2.2 扁平方案​

Tree 组件的核心思路是将原始的嵌套 children 数据结构平铺成一维数组,然后通过计算每个节点的深度(deep)、层级关系等信息,在渲染时动态计算缩进宽度、连接线等,从而实现树形结构的可视化。

一. Tree组件如何实现高性能大数据渲染?

  1. 将原始树形数据平铺为一维数组,便于后续计算

  2. 计算出实际需要渲染的节点数据,过滤隐藏的节点

  3. 利用虚拟列表技术只渲染可视区域的数据,实现大数据量的高效渲染

二、如何计算Tree组件中节点的各种状态(展开/折叠、选中等)?

  1. 展开/折叠状态根据ExpandedKeys计算

  2. 复选框选中状态需要考虑受控/非受控,严格受控模式,及父子节点关联

  3. 需要递归计算父节点和子节点的状态

  4. 利用平铺后的索引进行相关节点查询

三、Tree组件的交互如何实现?点击节点展开折叠,复选框状态切换等

  1. 点击展开折叠通过更新节点自身状态、可视状态及ExpandedKeys实现

  2. 点击复选框需要递归更新父子节点的状态,及相关keys

  3. 计算并保存实时状态,通过回调函数通知外部