From f096bb6a618c14da594841ae9fc57d9bb191c474 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Thu, 12 Sep 2024 17:36:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?perf(check-tree-select):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=A4=A7=E6=95=B0=E6=8D=AE=E9=87=8F=E4=B8=8B=E6=A0=91?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/smart-sheep-hide.md | 5 +++++ .changeset/stale-cougars-lay.md | 5 +++++ packages/ui/check-tree-select/src/utils/index.ts | 8 +++++--- 3 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 .changeset/smart-sheep-hide.md create mode 100644 .changeset/stale-cougars-lay.md diff --git a/.changeset/smart-sheep-hide.md b/.changeset/smart-sheep-hide.md new file mode 100644 index 000000000..636406abb --- /dev/null +++ b/.changeset/smart-sheep-hide.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +perf(check-tree-select): 优化大数据量下树选择器性能 diff --git a/.changeset/stale-cougars-lay.md b/.changeset/stale-cougars-lay.md new file mode 100644 index 000000000..11a18b378 --- /dev/null +++ b/.changeset/stale-cougars-lay.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/check-tree-select": patch +--- + +perf: 优化大数据量下树选择器性能 diff --git a/packages/ui/check-tree-select/src/utils/index.ts b/packages/ui/check-tree-select/src/utils/index.ts index 89c9463b1..bb4202ba0 100644 --- a/packages/ui/check-tree-select/src/utils/index.ts +++ b/packages/ui/check-tree-select/src/utils/index.ts @@ -1,5 +1,5 @@ import React from 'react' -import { fFindNodeById, findNestedChildren, getNodeAncestors } from '@hi-ui/tree-utils' +import { findNestedChildren, getNodeAncestors } from '@hi-ui/tree-utils' import { isArrayNonEmpty } from '@hi-ui/type-assertion' /** @@ -16,11 +16,12 @@ export const processCheckedIds = ( allowCheck: (node: any) => boolean ) => { const keySet = new Set(checkedIds) + const flattedDataMap = new Map(flattenData.map((item: any) => [item.id, item])) switch (type) { case 'CHILD': return checkedIds.filter((id) => { - const node = fFindNodeById(flattenData, id) + const node = flattedDataMap.get(id) as any if (node) { const { children } = node @@ -38,7 +39,8 @@ export const processCheckedIds = ( case 'PARENT': return checkedIds.filter((id) => { - const node = fFindNodeById(flattenData, id) as any + const node = flattedDataMap.get(id) as any + if (node) { // 向上递归遍历是否被勾选 const ancestors = getNodeAncestors(node) From 032f1f7f3987e6a2c445830d62b2109b18c2b229 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Sat, 14 Sep 2024 16:28:41 +0800 Subject: [PATCH 2/3] =?UTF-8?q?perf(check-tree-select):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=A4=A7=E6=95=B0=E6=8D=AE=E4=B8=8B=E5=8B=BE=E9=80=89?= =?UTF-8?q?=E5=8D=A1=E9=A1=BF=20(#2999)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/curly-beers-know.md | 5 +++++ .changeset/little-bananas-cry.md | 7 +++++++ packages/ui/check-tree-select/src/hooks/use-check.ts | 11 ++++++++--- packages/ui/tag-input/src/TagInputMock.tsx | 8 ++++---- packages/ui/tree/src/hooks/use-check.ts | 3 ++- packages/ui/tree/src/utils/index.ts | 12 +++++++++--- 6 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 .changeset/curly-beers-know.md create mode 100644 .changeset/little-bananas-cry.md diff --git a/.changeset/curly-beers-know.md b/.changeset/curly-beers-know.md new file mode 100644 index 000000000..51751e78e --- /dev/null +++ b/.changeset/curly-beers-know.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +perf(check-tree-select): 优化大数据下勾选卡顿 diff --git a/.changeset/little-bananas-cry.md b/.changeset/little-bananas-cry.md new file mode 100644 index 000000000..7dcd60a44 --- /dev/null +++ b/.changeset/little-bananas-cry.md @@ -0,0 +1,7 @@ +--- +"@hi-ui/check-tree-select": patch +"@hi-ui/tag-input": patch +"@hi-ui/tree": patch +--- + +perf: 优化大数据下勾选卡顿 diff --git a/packages/ui/check-tree-select/src/hooks/use-check.ts b/packages/ui/check-tree-select/src/hooks/use-check.ts index 1c2f1e7f5..ba2f817fe 100644 --- a/packages/ui/check-tree-select/src/hooks/use-check.ts +++ b/packages/ui/check-tree-select/src/hooks/use-check.ts @@ -30,11 +30,16 @@ export const useCheck = ( // 搜索时临时选中缓存数据 const [checkedNodes, setCheckedNodes] = useState([]) + const flattedDataMap = useMemo(() => new Map(flattedData.map((item) => [item.id, item])), [ + flattedData, + ]) + const [checkedIds, trySetCheckedIds] = useUncontrolledState( defaultCheckedIds, checkedIdsProp, (checkedIds, checkedNode, checked, semiCheckedIds) => { - const nextCheckedNodes = flattedData.filter((item) => checkedIds.includes(item.id)) + const checkedIdsSet = new Set(checkedIds) + const nextCheckedNodes = flattedData.filter((item) => checkedIdsSet.has(item.id)) setCheckedNodes(nextCheckedNodes) onCheck?.(checkedIds, { @@ -69,12 +74,12 @@ export const useCheck = ( const proxyOnNodeCheck = useCallback( (target: FlattedCheckTreeSelectDataItem, shouldChecked: boolean) => { // 保证 target 来源于原数据自身，而不是tree内部 - const targetNode = flattedData.find((item) => item.id === target.id) + const targetNode = flattedDataMap.get(target.id) if (targetNode) { onNodeCheck(targetNode, shouldChecked) } }, - [onNodeCheck, flattedData] + [flattedDataMap, onNodeCheck] ) return [checkedIds, trySetCheckedIds, proxyOnNodeCheck, checkedNodes, parsedCheckedIds] as const diff --git a/packages/ui/tag-input/src/TagInputMock.tsx b/packages/ui/tag-input/src/TagInputMock.tsx index df9365ea9..3c2efb5f8 100644 --- a/packages/ui/tag-input/src/TagInputMock.tsx +++ b/packages/ui/tag-input/src/TagInputMock.tsx @@ -56,10 +56,10 @@ export const TagInputMock = forwardRef ) => { const [value, tryChangeValue] = useUncontrolledState(defaultValue, valueProp, onChange) - const tagList = useMemo( - () => value.map((id) => data.find((item) => item.id === id) || { id, title: id }), - [value, data] - ) + const tagList = useMemo(() => { + const dataMap = new Map(data.map((item) => [item.id, item])) + return value.map((id) => dataMap.get(id) || { id, title: id }) + }, [value, data]) const tagCount = tagList.length const [containerWidth = 0, setContainerWidth] = useState() diff --git a/packages/ui/tree/src/hooks/use-check.ts b/packages/ui/tree/src/hooks/use-check.ts index 4cf39e405..2662f5810 100644 --- a/packages/ui/tree/src/hooks/use-check.ts +++ b/packages/ui/tree/src/hooks/use-check.ts @@ -27,8 +27,9 @@ export const useCheck = ( defaultCheckedIds, checkedIdsProp, (checkedIds, checkedNode, checked, semiCheckedIds) => { + const checkedIdsSet = new Set(checkedIds) const nextCheckedNodes = flattedData - .filter((item) => checkedIds.includes(item.id)) + .filter((item) => checkedIdsSet.has(item.id)) .map((item) => item.raw) onCheck?.(checkedIds, { diff --git a/packages/ui/tree/src/utils/index.ts b/packages/ui/tree/src/utils/index.ts index ed72478a4..c156ae73a 100644 --- a/packages/ui/tree/src/utils/index.ts +++ b/packages/ui/tree/src/utils/index.ts @@ -37,17 +37,22 @@ export const processCheckedIds = ( flattenData: any ) => { const keySet = new Set(checkedIds) + const flattedDataMap = new Map(flattenData.map((node: any) => [node.id, node])) switch (type) { case 'CHILD': return checkedIds.filter((id) => { - const node = fFindNodeById(flattenData, id) + const node = flattedDataMap.get(id) as any if (node) { const { children } = node if (isArrayNonEmpty(children)) { - if (children.filter((node) => !node.disabled).every((node) => keySet.has(node.id))) { + if ( + children + .filter((node: any) => !node.disabled) + .every((node: any) => keySet.has(node.id)) + ) { return false } } @@ -59,7 +64,8 @@ export const processCheckedIds = ( case 'PARENT': return checkedIds.filter((id) => { - const node = fFindNodeById(flattenData, id) + const node = flattedDataMap.get(id) as any + if (node) { // 向上递归遍历是否被勾选 const ancestors = getNodeAncestors(node) From 7613a3c9bd03e38aedf47e351ea6036af56cab7f Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Sat, 14 Sep 2024 16:35:37 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E5=8E=BB=E6=8E=89=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/smart-sheep-hide.md | 5 ----- .changeset/stale-cougars-lay.md | 5 ----- 2 files changed, 10 deletions(-) delete mode 100644 .changeset/smart-sheep-hide.md delete mode 100644 .changeset/stale-cougars-lay.md diff --git a/.changeset/smart-sheep-hide.md b/.changeset/smart-sheep-hide.md deleted file mode 100644 index 636406abb..000000000 --- a/.changeset/smart-sheep-hide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@hi-ui/hiui": patch ---- - -perf(check-tree-select): 优化大数据量下树选择器性能 diff --git a/.changeset/stale-cougars-lay.md b/.changeset/stale-cougars-lay.md deleted file mode 100644 index 11a18b378..000000000 --- a/.changeset/stale-cougars-lay.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@hi-ui/check-tree-select": patch ---- - -perf: 优化大数据量下树选择器性能