From 872c903af99f2a00c95de134d344a3cb53deab45 Mon Sep 17 00:00:00 2001
From: zhouyun <zhouyun1@xiaomi.com>
Date: Sat, 14 Sep 2024 16:49:21 +0800
Subject: [PATCH] =?UTF-8?q?perf(check-cascader):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=A4=A7=E6=95=B0=E6=8D=AE=E4=B8=8B=E5=8B=BE=E9=80=89=E6=A0=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=97=B6=E5=8D=A1=E9=A1=BF=20(#2998)=20(#300?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/sixty-rings-scream.md               |  5 +++++
 .changeset/tame-rats-wait.md                   |  5 +++++
 .../ui/check-cascader/src/CheckCascader.tsx    | 18 +++++++++---------
 3 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/sixty-rings-scream.md
 create mode 100644 .changeset/tame-rats-wait.md

diff --git a/.changeset/sixty-rings-scream.md b/.changeset/sixty-rings-scream.md
new file mode 100644
index 000000000..40b6e98f8
--- /dev/null
+++ b/.changeset/sixty-rings-scream.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-cascader": patch
+---
+
+perf: 优化大数据下勾选根节点时卡顿
diff --git a/.changeset/tame-rats-wait.md b/.changeset/tame-rats-wait.md
new file mode 100644
index 000000000..58e803620
--- /dev/null
+++ b/.changeset/tame-rats-wait.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+perf(check-cascader): 优化大数据下勾选根节点时卡顿
diff --git a/packages/ui/check-cascader/src/CheckCascader.tsx b/packages/ui/check-cascader/src/CheckCascader.tsx
index 231c7cb05..10603e891 100644
--- a/packages/ui/check-cascader/src/CheckCascader.tsx
+++ b/packages/ui/check-cascader/src/CheckCascader.tsx
@@ -103,10 +103,12 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
 
     const [cascaderData, setCascaderData] = useCache(data)
 
-    const flattedData = useMemo(() => flattenTreeData(cascaderData, fieldNames), [
-      cascaderData,
-      fieldNames,
-    ])
+    const [flattedData, flattedDataMap] = useMemo(() => {
+      const flattedData = flattenTreeData(cascaderData, fieldNames)
+      const flattedDataMap = new Map(flattedData.map((node: any, index) => [node.id, node]))
+
+      return [flattedData, flattedDataMap]
+    }, [cascaderData, fieldNames])
 
     const [_value, tryChangeValue] = useUncontrolledState(defaultValue, valueProp, onChange)
     // 内部实现使用尾部 id
@@ -114,10 +116,8 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
 
     const proxyOnChange = useLatestCallback(
       (value: React.ReactText[], item: any, shouldChecked: boolean) => {
-        const flattedItems = flattedData
-
         const itemsPaths = value.map((lastId) => {
-          const item = flattedItems.find((item) => item.id === lastId)
+          const item = flattedDataMap.get(lastId)
           if (item) {
             return getTopDownAncestors(item).map(({ id }) => id)
           }
@@ -223,9 +223,9 @@ export const CheckCascader = forwardRef<HTMLDivElement | null, CheckCascaderProp
 
     const selectedItems = useMemo(() => {
       return value.map((selectedId) => {
-        return flattedData.find((item) => item.id === selectedId)
+        return flattedDataMap.get(selectedId)
       })
-    }, [value, flattedData])
+    }, [flattedDataMap, value])
 
     return (
       <Picker