perf(check-cascader): 优化大数据下勾选根节点时卡顿 (#2998)

.changeset/sixty-rings-scream.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-cascader": patch
+---
+
+perf: 优化大数据下勾选根节点时卡顿

.changeset/tame-rats-wait.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+perf(check-cascader): 优化大数据下勾选根节点时卡顿

packages/ui/check-cascader/src/CheckCascader.tsx

@@ -103,21 +103,21 @@ 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
     const value = _value.map((path) => path[path.length - 1])
 
     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