@hsu-react/ui 2.5.5 → 2.5.7

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();
 

package/src/hooks/useShallowStable.ts

@@ -0,0 +1,65 @@
+import { useRef } from "react";
+
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+export function useShallowStable<T extends object>(value: T): T {
+  const ref = useRef(value);
+
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+function shallowEqual(a: object, b: object) {
+  if (Object.is(a, b)) return true;
+
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (
+      !Object.is(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+      )
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export default useShallowStable;