@hsu-react/ui 2.5.6 → 2.5.7

package/src/components/FormItem/ItemContainer/index.tsx

@@ -9,6 +9,7 @@ import usePermissions from "../../../hooks/usePermissions";
 import { isLegacyHasSelectorBrowser } from "../../../utils/cssSupports";
 import { generateRandomStr } from "hsu-utils";
 import useLabelSize from "./_hooks/useLabelSize";
+import useShallowStable from "../../../hooks/useShallowStable";
 import useInputSize from "./_hooks/useInputSize";
 
 interface TipsProps {
@@ -50,6 +51,9 @@ export interface ItemContainerProps extends FormItemProps {
   visible?: boolean;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_TIPS: NonNullable<ItemContainerProps["tips"]> = {};
+
 const ItemContainer: React.FC<ItemContainerProps> = (props) => {
   const {
     children,
@@ -73,7 +77,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
     colon,
     label,
     labelRender,
-    tips = {},
+    tips = EMPTY_TIPS,
     horizontalAlignment = "start",
     hideRequired = false,
     labelClassName,
@@ -89,7 +93,18 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
     visible: _visible,
     ...formItemProps
   } = props;
-  const { icon = "material-symbols:help", iconClassName, ...tipsConfig } = tips;
+  const {
+    icon = "material-symbols:help",
+    iconClassName,
+    ...restTipsConfig
+  } = tips;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 memo 恒不命中。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const tipsConfig = useShallowStable(restTipsConfig);
+  // memo 只需要知道「有没有配 tips」，把对象本身放进依赖数组等于按引用比：
+  // 消费方写内联 `tips={{ ... }}`（最常见的写法）就让 label 的 memo 恒不命中。
+  // 拆成布尔量后依赖回到值语义。
+  const hasTips = Object.keys(tips).length > 0;
   const { permitted } = usePermissions(hasPermi);
   const cls = useMemo(() => generateRandomStr(10), []);
   const legacyHasSelector = isLegacyHasSelectorBrowser();
@@ -99,7 +114,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
       return undefined;
     }
 
-    return Object.keys(tips).length ? (
+    return hasTips ? (
       <>
         <span className={classNames(styles.labelContent, labelClassName)}>
           <span
@@ -160,7 +175,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
       </>
     ) : undefined;
   }, [
-    tips,
+    hasTips,
     labelClassName,
     label,
     tipsConfig,
@@ -225,7 +240,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
         [styles.hideRequired]: hideRequired,
         [styles[horizontalAlignment]]:
           layout === "horizontal" && horizontalAlignment,
-        [styles.hasLabelContent]: !!Object.keys(tips).length,
+        [styles.hasLabelContent]: hasTips,
         [styles.hideAdditiona]: hideAdditiona,
         [styles.legacyHasLabelExtra]:
           legacyHasSelector &&
@@ -233,7 +248,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
           !hideLabel &&
           !!label &&
           !!labelExtra &&
-          !Object.keys(tips).length,
+          !hasTips,
       })}
       colon={
         typeof colon === "boolean"

package/src/components/Operate/index.tsx

@@ -28,6 +28,9 @@ export interface OperateProps
   moreIcon?: ReactNode | false;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_MENU: OperateProps[] = [];
+
 /**
  * Render an icon
  * @param icon - Icon configuration
@@ -56,7 +59,7 @@ const Operate: React.FC<OperateProps> = (props) => {
   const {
     title,
     className,
-    menu = [],
+    menu = EMPTY_MENU,
     icon,
     delete: isDelete,
     popconfirm,

package/src/components/Pagination/index.tsx

@@ -20,10 +20,13 @@ export interface PaginationProps
   onStaticPaginationChange?: (page: number, pageSize: number) => void;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_PAGE_SIZE_OPTIONS: number[] = [];
+
 const Pagination: React.FC<PaginationProps> = (props) => {
   const {
     simple,
-    pageSizeOptions = [],
+    pageSizeOptions = EMPTY_PAGE_SIZE_OPTIONS,
     showSizeChanger,
     onShowSizeChange,
     onChange,

package/src/components/Search/_hooks/useSearchCommon.ts

@@ -76,6 +76,9 @@ export interface UseSearchCommonReturn {
   permitted: boolean;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_SEARCH_ITEMS: FormItemProps[] = [];
+
 /**
  * Extracts the common logic shared by all Search components
  */
@@ -85,7 +88,7 @@ export const useSearchCommon = (
   const {
     form,
     searchItems,
-    moreSearchItems = [],
+    moreSearchItems = EMPTY_SEARCH_ITEMS,
     searchData,
     hasPermi,
     beforeButtonGroup,

package/src/components/Select/AutoCompleteSelect/index.tsx

@@ -40,6 +40,9 @@ export interface AutoCompleteSelectProps
   optionFontSize?: number;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_OPTIONS: AutoCompleteOption[] = [];
+
 const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
   const {
     prefix,
@@ -53,7 +56,7 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     popupClassName,
     filterOption: customFilterOption,
     onChange,
-    options = [],
+    options = EMPTY_OPTIONS,
     placement = "bottomLeft",
     onDropdownVisibleChange,
     popupMatchSelectWidth,

package/src/components/Spreadsheet/depsMemo.test.tsx

@@ -0,0 +1,95 @@
+import { render } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * 2.5.7：`xOptions` 的解构默认值与 `xOptionsRest` 这个 rest 包每渲染都是新对象，
+ * 直接进「建表格实例」那条 effect 的依赖数组 → **effect 每渲染必重跑**。
+ * 实例本身被 `!sheet` 挡住了不会重建，但 effect 体每次都白跑一遍，
+ * 且依赖里挂着的 `xOptionsRest` 永远比不出「配置真的变了」——纯粹的假依赖。
+ *
+ * 这里单独一个文件，是因为要把 `x-data-spreadsheet` 换成假实现（jsdom 里跑不了真的）。
+ */
+
+const probe = { effect: 0 };
+(globalThis as Record<string, unknown>).__spreadsheetProbe = probe;
+
+vi.mock("react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react")>();
+  const counters = () =>
+    (globalThis as Record<string, unknown>).__spreadsheetProbe as typeof probe;
+  return {
+    ...actual,
+    useEffect: (fn: () => unknown, deps: unknown[]) =>
+      actual.useEffect(() => {
+        counters().effect++;
+        return fn() as ReturnType<React.EffectCallback>;
+      }, deps),
+  };
+});
+
+const construct = vi.fn();
+const loadData = vi.fn();
+
+vi.mock("x-data-spreadsheet", () => ({
+  default: class FakeSpreadsheet {
+    constructor(...args: unknown[]) {
+      construct(...args);
+    }
+    loadData(...args: unknown[]) {
+      loadData(...args);
+      return this;
+    }
+  },
+}));
+vi.mock("x-data-spreadsheet/dist/xspreadsheet.css", () => ({}));
+
+import Spreadsheet from ".";
+
+beforeEach(() => {
+  probe.effect = 0;
+  construct.mockClear();
+  loadData.mockClear();
+});
+
+function rerenderEffectCost(make: () => ReactElement) {
+  const { rerender, unmount } = render(make());
+  const before = probe.effect;
+  rerender(make());
+  const cost = probe.effect - before;
+  unmount();
+  return cost;
+}
+
+describe("Spreadsheet：xOptions / xOptionsRest 不再让建表 effect 每渲染必重跑", () => {
+  it("配置没变时重渲染不再重跑任何 effect", () => {
+    // 不传 xOptions（走默认值）与传内联对象（消费方最常见的写法）都必须为 0
+    expect(rerenderEffectCost(() => <Spreadsheet />)).toBe(0);
+    expect(
+      rerenderEffectCost(() => <Spreadsheet xOptions={{ showBottomTool: true }} />),
+    ).toBe(0);
+  });
+
+  it("表格实例只建一次，重渲染不会重复 new", () => {
+    const { rerender } = render(<Spreadsheet />);
+    rerender(<Spreadsheet />);
+    rerender(<Spreadsheet />);
+    expect(construct).toHaveBeenCalledTimes(1);
+  });
+
+  it("xOptions 真变了仍然透进新配置（浅比较不相等就立刻透出）", () => {
+    // 首帧就带上配置，确认它确实进了 XSpreadsheet 的构造参数
+    render(<Spreadsheet xOptions={{ showBottomTool: false, mode: "read" }} />);
+    expect(construct).toHaveBeenCalledTimes(1);
+    expect(construct.mock.calls[0][1]).toMatchObject({ mode: "read" });
+  });
+
+  it("data 真变了仍然重新 loadData", () => {
+    const bookA = { SheetNames: ["A"], Sheets: { A: {} } } as never;
+    const bookB = { SheetNames: ["B"], Sheets: { B: {} } } as never;
+    const { rerender } = render(<Spreadsheet data={bookA} />);
+    const first = loadData.mock.calls.length;
+    rerender(<Spreadsheet data={bookB} />);
+    expect(loadData.mock.calls.length).toBeGreaterThan(first);
+  });
+});

package/src/components/Spreadsheet/index.tsx

@@ -6,6 +6,7 @@ import "x-data-spreadsheet/dist/xspreadsheet.css";
 import classNames from "classnames";
 import { WorkBook } from "xlsx";
 import { stox } from "./xlsxspread";
+import useShallowStable from "../../hooks/useShallowStable";
 
 interface XOptions extends Omit<Options, "view"> {
   showBottomTool?: boolean;
@@ -17,9 +18,15 @@ interface SpreadsheetProps {
   className?: string;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 effect 每渲染必重跑；提到模块级常量
+const EMPTY_X_OPTIONS: XOptions = {};
+
 const Spreadsheet: React.FC<SpreadsheetProps> = (props) => {
-  const { data, xOptions = {}, className } = props;
-  const { showBottomTool = true, ...xOptionsRest } = xOptions;
+  const { data, xOptions = EMPTY_X_OPTIONS, className } = props;
+  const { showBottomTool = true, ...restXOptions } = xOptions;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 memo 恒不命中。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const xOptionsRest = useShallowStable(restXOptions);
   const ref = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const id = useMemo(() => generateRandomStr(10), []);

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -19,6 +19,9 @@ import {
 import usePermissions from "../../../hooks/usePermissions";
 import { PaginationProps } from "../../Pagination";
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_COLUMNS: ColumnsType = [];
+
 // measureAlign columns: measured at 14px, consistent with the table body and autoWidth title measurement
 const MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText only returns the advance width, about 1px narrower than the actual DOM rendering; add a 2px buffer to avoid squeezing the widest row
@@ -97,7 +100,7 @@ const useTableColumns = <T extends AnyObject>(
   handleTableChange: TableProps<T>["onChange"];
 } => {
   const {
-    columns = [],
+    columns = EMPTY_COLUMNS,
     scroll,
     autoWidth,
     dataSource,

package/src/components/Tree/_hooks/useTreeState.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, Key, useMemo, useRef } from "react";
+import { useEffect, useState, Key, useMemo, useRef, useCallback } from "react";
 import { Equal } from "hsu-utils";
 import { CheckedKeys, TreeData } from "..";
 import { normalizeCheckedKeys } from "../_utils/normalizeCheckedKeys";
@@ -42,13 +42,19 @@ export const useExpandedKeys = (
     }
   }, [defaultExpandedKeys, expandedKeysProps]);
 
-  // Wrap setExpandedKeys to mark that the user has manually interacted
-  const handleSetExpandedKeys = (
-    keys: Key[] | undefined | ((prev: Key[] | undefined) => Key[] | undefined)
-  ) => {
-    hasUserInteractedRef.current = true;
-    setExpandedKeys(keys);
-  };
+  // Wrap setExpandedKeys to mark that the user has manually interacted.
+  // 必须 useCallback：这个函数被 Tree 的 handleExpand 当依赖用，
+  // 每渲染新建一个就让那个 useCallback 恒不命中——展开回调每渲染换引用透给 antd Tree。
+  // 函数体只碰 ref 和状态 setter，两者都恒定，所以依赖数组是空的。
+  const handleSetExpandedKeys = useCallback(
+    (
+      keys: Key[] | undefined | ((prev: Key[] | undefined) => Key[] | undefined)
+    ) => {
+      hasUserInteractedRef.current = true;
+      setExpandedKeys(keys);
+    },
+    []
+  );
 
   return [expandedKeys, handleSetExpandedKeys] as const;
 };

package/src/components/Tree/depsMemo.test.tsx

@@ -0,0 +1,64 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * 2.5.7：`treeConfig` 是 rest 解构包，每次渲染都是新对象。它进了 `handleExpand`
+ * 的 `useCallback` 依赖数组 → **展开回调每渲染都换一个新引用**，原样传给 antd Tree。
+ *
+ * 这里把 antd 的 `Tree` 换成一个只记录 props 的探针，直接比 `onExpand` 的引用。
+ * 单独一个文件，是因为 `vi.mock` 是文件级的，不能污染别的用例。
+ */
+
+const seen: Record<string, unknown>[] = [];
+
+vi.mock("antd", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("antd")>();
+  const Probe = (props: Record<string, unknown>) => {
+    seen.push(props);
+    return React.createElement(actual.Tree, props);
+  };
+  Probe.DirectoryTree = actual.Tree.DirectoryTree;
+  Probe.TreeNode = actual.Tree.TreeNode;
+  return { ...actual, Tree: Probe };
+});
+
+import Tree from ".";
+
+const NODES = [{ key: "1", value: "1", title: "节点甲" }];
+
+beforeEach(() => {
+  seen.length = 0;
+});
+
+describe("Tree：treeConfig 不再让展开回调每渲染换引用", () => {
+  it("props 没变时，传给 antd Tree 的 onExpand 保持同一个引用", () => {
+    const make = () => <Tree treeData={NODES} />;
+    const { rerender } = render(make());
+    rerender(make());
+    expect(seen.length).toBeGreaterThanOrEqual(2);
+    expect(seen[seen.length - 1].onExpand).toBe(seen[0].onExpand);
+  });
+
+  it("消费方传内联的透传配置时也保持同一个引用（浅比较看的是值）", () => {
+    const make = () => <Tree treeData={NODES} showLine blockNode />;
+    const { rerender } = render(make());
+    rerender(make());
+    expect(seen[seen.length - 1].onExpand).toBe(seen[0].onExpand);
+  });
+
+  it("透传配置真变了仍然透出新引用，且新的 onExpand 调的是新的回调", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    const { rerender } = render(<Tree treeData={NODES} onExpand={first} />);
+    type Expand = (keys: unknown[], info: unknown) => void;
+    const before = seen[seen.length - 1].onExpand as Expand;
+    rerender(<Tree treeData={NODES} onExpand={second} />);
+    const after = seen[seen.length - 1].onExpand as Expand;
+    expect(after).not.toBe(before);
+
+    after(["1"], { node: { key: "1" } });
+    expect(second).toHaveBeenCalledTimes(1);
+    expect(first).not.toHaveBeenCalled();
+  });
+});

package/src/components/Tree/index.tsx

@@ -21,6 +21,7 @@ import { ButtonProps } from "../Button";
 import { getExpandedKeysByLevel, getNodePath } from "./_utils";
 import TextEllipsis from "../TextEllipsis";
 import usePermissions from "../../hooks/usePermissions";
+import useShallowStable from "../../hooks/useShallowStable";
 import { isLegacyHasSelectorBrowser } from "../../utils/cssSupports";
 
 export interface TreeData extends Record<string, unknown> {
@@ -79,6 +80,9 @@ interface TreeFC extends React.FC<TreeProps> {
   TreeNode: typeof AntdTree.TreeNode;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_TREE_DATA: TreeData[] = [];
+
 const Tree = ((props: TreeProps) => {
   const {
     title,
@@ -88,7 +92,7 @@ const Tree = ((props: TreeProps) => {
     titleClassName,
     className,
     search,
-    treeData = [],
+    treeData = EMPTY_TREE_DATA,
     onChange,
     onCheck,
     onSelect,
@@ -109,8 +113,11 @@ const Tree = ((props: TreeProps) => {
     onSelectPath,
     allowDeselect = true,
     titleSearchBarClassName,
-    ...treeConfig
+    ...restTreeConfig
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 memo 恒不命中。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const treeConfig = useShallowStable(restTreeConfig);
   const { permitted } = usePermissions(hasPermi);
   const legacyHasSelector = isLegacyHasSelectorBrowser();