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

将对树形结构数据处理使用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,7 +21,8 @@ function BasicCascader(props) {
} = props; } = props;
// 根据 level 处理树数据 // 根据 level 处理树数据
const processedData = level const processedData = useMemo(() => {
return level
? processTreeDataByLevel({ ? processTreeDataByLevel({
data, data,
level, level,
@ -29,6 +30,7 @@ function BasicCascader(props) {
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) => {
if (selectedOptions && onGetNodePaths) {
const parentNodes = getNodePaths(selectedOptions); const parentNodes = getNodePaths(selectedOptions);
onGetNodePaths?.(parentNodes); 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,6 +19,7 @@ function BasicSelect(props) {
} = props; } = props;
const handleChange = (event, option) => { const handleChange = (event, option) => {
if (onGetLabel || onGetOption) {
if (Array.isArray(event)) { if (Array.isArray(event)) {
if (event.length > 0) { if (event.length > 0) {
const findItems = []; const findItems = [];
@ -49,6 +50,7 @@ function BasicSelect(props) {
onGetOption?.({}); 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,8 +22,9 @@ function BasicSelectTree(props) {
...restProps ...restProps
} = props; } = props;
const processedTreeData = useMemo(() => {
// 根据 level 处理树数据 // 根据 level 处理树数据
let processedTreeData = level let result = level
? processTreeDataByLevel({ ? processTreeDataByLevel({
data: treeData, data: treeData,
level, level,
@ -33,11 +34,19 @@ function BasicSelectTree(props) {
: 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") {
if (onGetNodePaths) {
const parentNodes = []; const parentNodes = [];
for (let i = 0; i < value.length; i++) { for (let i = 0; i < value.length; i++) {
const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i]; const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value[i].value : value[i];
@ -52,9 +61,11 @@ function BasicSelectTree(props) {
} }
const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey); const deduplicationParentNodes = arrayObjectDeduplication(parentNodes, idKey);
onGetNodePaths?.(deduplicationParentNodes); onGetNodePaths?.(deduplicationParentNodes);
}
onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label); onGetLabel?.((restProps.labelInValue || restProps.treeCheckStrictly) ? value.map(item => item.label) : label);
} }
else { else {
if (onGetNodePaths || onGetLabel) {
const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value; const targetId = (restProps.labelInValue || restProps.treeCheckStrictly) ? value.value : value;
const parentNodes = getTreeNodePaths({ const parentNodes = getTreeNodePaths({
data: treeData, data: treeData,
@ -67,6 +78,7 @@ function BasicSelectTree(props) {
onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]); onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
} }
} }
}
else { else {
onGetNodePaths?.([]); onGetNodePaths?.([]);
onGetLabel?.(""); onGetLabel?.("");