将部分计算增加判断,只有传入对应方法真正需要获取值的时候才进行计算,避免不必要的计算

将对树形结构数据处理使用useMemo缓存
master
LiuJiaNan 2026-02-06 18:02:30 +08:00
parent 4f7a81d81c
commit d52b7911a9
4 changed files with 78 additions and 60 deletions

View File

@ -1,5 +1,5 @@
import { Cascader } from "antd";
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { processTreeDataByLevel } from "../../../utils";
/**
@ -21,14 +21,16 @@ function BasicCascader(props) {
} = props;
// 根据 level 处理树数据
const processedData = level
? processTreeDataByLevel({
const processedData = useMemo(() => {
return level
? processTreeDataByLevel({
data,
level,
childrenKey,
currentLevel: 1,
})
: data;
: data;
}, [data, level, childrenKey]);
const getNodePaths = (selectedOptions) => {
let nodePaths = selectedOptions;
@ -39,8 +41,10 @@ function BasicCascader(props) {
};
const handleChange = (value, selectedOptions) => {
const parentNodes = getNodePaths(selectedOptions);
onGetNodePaths?.(parentNodes);
if (selectedOptions && onGetNodePaths) {
const parentNodes = getNodePaths(selectedOptions);
onGetNodePaths?.(parentNodes);
}
onChange?.(value, selectedOptions);
};

View File

@ -74,7 +74,7 @@ const BasicLeftTree = (props) => {
};
const handleSelect = (selectedKeys, event) => {
if (selectedKeys.length > 0) {
if (selectedKeys.length > 0 && onGetNodePaths) {
const selectedNodeId = selectedKeys[0];
const parentNodes = getTreeNodePaths({
data: treeData,

View File

@ -19,34 +19,36 @@ function BasicSelect(props) {
} = props;
const handleChange = (event, option) => {
if (Array.isArray(event)) {
if (event.length > 0) {
const findItems = [];
const names = [];
event.forEach((item) => {
const findItem = data.find(dataItem => dataItem[idKey] === item);
if (findItem) {
findItems.push(findItem);
names.push(findItem[nameKey]);
}
});
onGetLabel?.(names);
onGetOption?.(findItems);
if (onGetLabel || onGetOption) {
if (Array.isArray(event)) {
if (event.length > 0) {
const findItems = [];
const names = [];
event.forEach((item) => {
const findItem = data.find(dataItem => dataItem[idKey] === item);
if (findItem) {
findItems.push(findItem);
names.push(findItem[nameKey]);
}
});
onGetLabel?.(names);
onGetOption?.(findItems);
}
else {
onGetLabel?.([]);
onGetOption?.([]);
}
}
else {
onGetLabel?.([]);
onGetOption?.([]);
}
}
else {
if (event) {
const findItem = data.find(item => item[idKey] === event);
onGetLabel?.(findItem[nameKey]);
onGetOption?.(findItem);
}
else {
onGetLabel?.("");
onGetOption?.({});
if (event) {
const findItem = data.find(item => item[idKey] === event);
onGetLabel?.(findItem[nameKey]);
onGetOption?.(findItem);
}
else {
onGetLabel?.("");
onGetOption?.({});
}
}
}
onChange?.(event, option);

View File

@ -1,5 +1,5 @@
import { TreeSelect } from "antd";
import { useEffect } from "react";
import { useEffect, useMemo } from "react";
import { arrayObjectDeduplication, getDataType, getTreeNodePaths, processTreeDataByLevel, processTreeDataForOnlyLastLevel } from "../../../utils";
/**
@ -22,49 +22,61 @@ function BasicSelectTree(props) {
...restProps
} = props;
// 根据 level 处理树数据
let processedTreeData = level
? processTreeDataByLevel({
const processedTreeData = useMemo(() => {
// 根据 level 处理树数据
let result = level
? processTreeDataByLevel({
data: treeData,
level,
childrenKey,
currentLevel: 1,
})
: treeData;
: treeData;
// 根据 onlyLastLevel 处理树数据
processedTreeData = processTreeDataForOnlyLastLevel({ data: processedTreeData, childrenKey, onlyLastLevel });
// 根据 onlyLastLevel 处理树数据
result = processTreeDataForOnlyLastLevel({
data: result,
childrenKey,
onlyLastLevel,
});
return result;
}, [treeData, level, childrenKey, onlyLastLevel]);
const handleChange = (value, label, extra) => {
if (value) {
if (getDataType(value) === "Array") {
const parentNodes = [];
for (let i = 0; i < value.length; i++) {
const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i];
const currentParentNodes = getTreeNodePaths({
if (onGetNodePaths) {
const parentNodes = [];
for (let i = 0; i < value.length; i++) {
const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i];
const currentParentNodes = getTreeNodePaths({
data: treeData,
targetId,
idKey,
childrenKey,
isIncludeOneself: onGetNodePathsIsIncludeOneself,
});
parentNodes.push(...currentParentNodes);
}
const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey);
onGetNodePaths?.(deduplicationParentNodes);
}
onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label);
}
else {
if (onGetNodePaths || onGetLabel) {
const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value;
const parentNodes = getTreeNodePaths({
data: treeData,
targetId,
idKey,
childrenKey,
isIncludeOneself: onGetNodePathsIsIncludeOneself,
});
parentNodes.push(...currentParentNodes);
onGetNodePaths?.(parentNodes);
onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
}
const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey);
onGetNodePaths?.(deduplicationParentNodes);
onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label);
}
else {
const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value;
const parentNodes = getTreeNodePaths({
data: treeData,
targetId,
idKey,
childrenKey,
isIncludeOneself: onGetNodePathsIsIncludeOneself,
});
onGetNodePaths?.(parentNodes);
onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
}
}
else {