Tree组件实现支持50W数据方法剖析
出师未捷身先死
有用户在 fes-design VIP群 吐槽 Tree 组件在处理一万条左右数据时很卡。但是 fes-design 已重视大数据场景，提供基础的虚拟列表组件，以及选择器、表格、树形、级联等组件基于虚拟列表处理了大数据场景，为啥 Tree 组件还卡呢？
Tree 自身的复杂性
Tree 数据结构特性决定 Tree 组件中父子节点存在关联，以选中功能为例：
Select：选中只影响自身状态。
Tree：当开启父子关联时，选中某个节点时，其所有子孙节点全部选中，同时需计算父辈节点是否为全选中。
虚拟滚动带来的复杂性
虚拟滚动是指根据滚动距离计算当前视野范围需要展示的内容。不管有多少数据，只渲染视野范围内的选项，大大减少了 Vue 实例的创建，性能无比优越。因为虚拟滚动只接受一维数组结构，所以Tree 组件在初始化时需要把树状结构数据按照展示顺序拍平为一维数组。那么展开关闭的功能就变得复杂了！
不考虑虚拟滚动方案时节点会这么设计：
<div class="node">
<div>{{ node.label }}</div>
<div v-show="node.expanded" v-for="child in node.children">
<Node node="child"/>
</div>
</div>
展开关闭只需要改变 node.expanded。
考虑虚拟滚动方案时节点会这么设计：
<div class="node">
<div>{{ node.label }}</div>
</div>
计算所有子孙节点状态，判断节点是否显示，如果显示则把当前节点丢到虚拟滚动的一维数组中。
查问题
先用chrome的性能测试工具看看问题在哪：
可以找到耗时的代码语句，下一步干掉他们。
怎么做
缓存数据
Tree 组件在初始化时会把树状结构数据按照展示顺序拍平为一维数组，在这个过程中，记录每个节点的父级节点为indexPath 和所有子孙节点childrenPath。在后续逻辑中经常会用到：
// 当选中某个节点时，只需要处理此节点相关上下节点状态
if (checkingNode) {
const { indexPath } = checkingNode;
indexPath.slice(0).reverse().forEach(computeIndeterminate);
checkingNode.hasChildren &&
checkingNode.childrenPath.forEach(
(key: TreeNodeKey) => {
const node = nodeList.get(key);
node.isIndeterminate.value = false;
},
);
checkingNode = null;
}
减少响应式数据
在优化前所有节点都会丢到nodeList中：
const nodeList = reactive<TreeNodeList>({});
// 转换节点数据
const copy = transformNode(node, indexPath, level);
nodeList[copy.value] = copy;
数据量上来后，数据响应式处理耗时非常大。所以我们不要把整个对象一股脑弄成响应式的，只把需要的字段设置为响应式的。
Tree节点需要缓存的内部状态有是否开展、是否全选、是否选中，所以只需要这三个字段为响应式：
const nodeList: Map<TreeNodeKey, InnerTreeOption> = new Map();
f (!nodeList.get(value)) {
// Object.assign比解构快很多
copy = Object.assign({}, newItem);
copy.isExpanded = ref(false);
copy.isIndeterminate = ref(false);
copy.isChecked = ref(false);
}
nodeList.set(copy.value, copy);
用更快的 JS 语法
1、Array.concat 性能比较慢，改为使用赋值
export function concat(arr: any[], arr2: any[]) {
const arrLength = arr.length;
const arr2Length = arr2.length;
arr.length = arrLength + arr2Length;
for (let i = 0; i < arr2Length; i++) {
arr[arrLength + i] = arr2[i];
}
return arr;
}
2、Map 的查找性能比 Object 稍好
const nodeList = {} ;
改为使用
const nodeList = new Map();
3、解构语法比较慢，改为使用Object.assign
扣细节
1、computeCurrentData 是执行非常耗时的函数，由于 watch 两个变量，在初始化时会执行两次，加上debounce只需要执行一次。
watch(
[currentExpandedKeys, transformData],
debounce(() => {
if (isSearchingRef.value) return;
computeCurrentData();
}, 10),
{
immediate: true,
},
);
2、叶子节点不需要计算isExpanded
if (node.hasChildren) {
node.isExpanded.value = expandedKeys.includes(key);
}
3、计算显示的节点时，可以先判断是否由展开或者关闭节点触发的计算，如果是则只需要计算此节点子孙和父级节点状态，而不需要计算全部节点
const computeCurrentData = ()=> {
if(expandingNode) {
// 计算此节点相关节点
return
}
// 遍历所有节点
}
类似这种细节非常多，通过性能测试工具和自己经验能找到很多地方，积少成多，性能能提升不少。
数据结构一致性的魅力
以收起节点为例：
常规思路是：当点击收起节点时，判断当前所有子孙节点是否在显示数据数组中，如果在就删掉。复杂度是O(n^2)。
但是可以换个思路：由于childrenPath和currentData的顺序一致，只需要遍历一次childrenPath，判断是是否为当前节点下一个节点，如果是，删掉就好。复杂度是O(n)
const deleteNode = (keys: TreeNodeKey[], index: number) => {
let len = 0;
keys.forEach((key) => {
if (key === currentData.value[index + len]) {
len += 1;
}
});
currentData.value.splice(index, len);
};
const index = currentData.value.indexOf(expandingNode.value);
deleteNode(expandingNode.childrenPath, index + 1);
在 Tree 的代码中有很多地方，可以通过特殊的数据结构来减少或者避免循环，性能提升非常大！
欢迎来体验： fes-design
以上就是Tree组件实现支持50W数据方法剖析的详细内容，更多关于Tree组件50W数据的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
