-
-
Notifications
You must be signed in to change notification settings - Fork 478
Closed
Labels
Description
Hi,项目在使用该组件时发现较明显的性能问题,具体表现为
在较大数据下(比如1w条数据),进行搜索时耗时较长,出现明显卡顿问题,甚至不可用。
具体原因来自于generate.tsx
文件中
const tmpValues = mergedRawValue.map((val: RawValueType) => {
const valueOptions = getValueOption([val]);
const displayValue = getLabeledValue(val, {
options: valueOptions,
prevValue: mergedValue,
labelInValue: mergedLabelInValue,
optionLabelProp: mergedOptionLabelProp,
});
return {
...displayValue,
disabled: isValueDisabled(val, valueOptions),
};
});
mergedRawValue
本身使用map
方法进行数组遍历,遍历方法体中调用getLabeledValue
方法,该方法使用了数组find
方法,同时存在遍历查找,时间复杂度几乎为n^2
。
valueUtil.ts
文件中关于getLabeledValue
方法的实现如下:
if (labelInValue) {
prevValItem = prevValues.find((prevItem: LabelValueType) => {
if (typeof prevItem === 'object' && 'value' in prevItem) {
return prevItem.value === value;
}
// [Legacy] Support `key` as `value`
return prevItem.key === value;
}) as LabelValueType;
}
修改建议:
使用预处理的Map替代数组find
查找,避免n^2
时间复杂度出现。因此mergedRawValue
遍历前可以生成mergedValue
的value为key的Map,在getLabeledValue
直接使用该map找到对应数据,避免再次使用find
。该修改方法在测试数据下有较大性能提升。
期待尽快优化,谢谢~