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

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

View File

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

View File

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

View File

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