@hsu-react/ui 2.5.5 → 2.5.7

package/src/components/Chart/Heatmap/index.tsx

@@ -10,6 +10,7 @@ import {
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface HeatmapDataItem {
   /** X-axis index or name */
@@ -43,6 +44,19 @@ export interface ChartHeatmapProps extends ChartCommonProps {
   inRangeColor?: string[];
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_IN_RANGE_COLOR = [
+  "#8BCCFB",
+  "#75C3FB",
+  "#5AB5F6",
+  "#42AEFA",
+  "#2DA1F5",
+  "#0F89E1",
+  "#056FBB",
+  "#025794",
+  "#0A4089",
+];
+
 const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
   const {
     className,
@@ -61,19 +75,13 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
     onChart,
     onClick,
     zeroColor,
-    inRangeColor = [
-      "#8BCCFB",
-      "#75C3FB",
-      "#5AB5F6",
-      "#42AEFA",
-      "#2DA1F5",
-      "#0F89E1",
-      "#056FBB",
-      "#025794",
-      "#0A4089",
-    ],
-    ...coreOption
+    inRangeColor = DEFAULT_IN_RANGE_COLOR,
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/src/components/Chart/Line/index.tsx

@@ -25,6 +25,7 @@ import {
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface ChartLineProps extends ChartCommonProps {
   chartTitle?: string;
@@ -71,8 +72,12 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -8,6 +8,7 @@ import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
 import { useLatestRef } from "../../../../hooks/useLatestRef";
+import useShallowStable from "../../../../hooks/useShallowStable";
 
 export interface Pie3DDataItem {
   name: string;
@@ -86,6 +87,10 @@ export interface SeriesItem {
   };
 }
 
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_TOOLTIP = { show: false };
+const DEFAULT_LABEL: LabelConfig = { show: true };
+
 const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
   const {
     className,
@@ -100,13 +105,17 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     minHeight = 1,
     maxHeight = 10,
     yOffset = -0.2,
-    tooltip = { show: false },
-    label = { show: true },
+    tooltip = DEFAULT_TOOLTIP,
+    label = DEFAULT_LABEL,
     enableMouseControl = false,
     onChart,
     onClick,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
 
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);

package/src/components/Chart/Pie/index.tsx

@@ -14,6 +14,7 @@ import { autoScrollLegend } from "../chartUtils";
 import styles from "../index.module.scss";
 import ChartPie3D, { ChartPie3DProps } from "./Pie3D";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface ChartPieProps extends ChartCommonProps {
   chartTitle?: string;
@@ -43,6 +44,9 @@ export interface ChartPieFC extends React.FC<ChartPieProps> {
   Three: React.FC<ChartPie3DProps>;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_EXTEND_SERIES: Series[] = [];
+
 const ChartPie: ChartPieFC = (props) => {
   const {
     className,
@@ -54,7 +58,7 @@ const ChartPie: ChartPieFC = (props) => {
     series,
     title,
     onChart,
-    extendSeries = [],
+    extendSeries = EMPTY_EXTEND_SERIES,
     onClick,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
@@ -64,8 +68,12 @@ const ChartPie: ChartPieFC = (props) => {
     spanAngle = 180,
     center,
     radius,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/src/components/Chart/Polar/index.tsx

@@ -8,6 +8,7 @@ import {
 } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface ChartPolarProps extends ChartCommonProps {
   title1?: string;
@@ -18,6 +19,9 @@ export interface ChartPolarProps extends ChartCommonProps {
   color?: string[] | string;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_COLOR = ["#00FFA3", "#00FFA3"];
+
 const Polar: React.FC<ChartPolarProps> = (props) => {
   const {
     className,
@@ -32,9 +36,13 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
     title2Style,
     textStyle,
     seriesData,
-    color = ["#00FFA3", "#00FFA3"],
-    ...coreOption
+    color = DEFAULT_COLOR,
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/src/components/Chart/Radar/index.tsx

@@ -3,6 +3,7 @@ import useContainerReady from "../_hooks/useContainerReady";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 export interface RadarIndicator {
   name: string;
@@ -51,8 +52,12 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
     singleIndicatorTooltip: singleIndicatorTooltipProp = false,
     singleIndicatorMode,
     singleIndicatorHoverFill,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = useShallowStable(restOption);
 
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);

package/src/components/Chart/optionMemo.test.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+
+/**
+ * 这一组用例盯的是 `chartOption` 那个 `useMemo` 的**依赖必须是值，不能是每次渲染
+ * 新建的对象**。
+ *
+ * 依赖里一旦混进新建对象（`...coreOption` 这个 rest 包、或写在解构默认值里的
+ * `= { show: false }` / `= ["#fff"]` 字面量），memo 就**恒不命中**：
+ * 父组件每渲染一次 → chartOption 换新引用 → effect 重跑 → `setOption(…, true)`
+ * 整个重设配置 —— 动画重播、鼠标悬浮态被清掉，用户直接看得见。
+ *
+ * 修法不是「让 effect 少跑」，而是让依赖回到值语义：
+ * - rest 包走 `useShallowStable`（内容浅相等就复用同一个引用）；
+ * - 解构默认值里的对象/数组字面量提到模块级常量。
+ *
+ * 所以每个组件都验两条：
+ * 1. 父组件重渲染、props 未变 → 不再 setOption；
+ * 2. 配置真变了（换数据）→ 仍然要 setOption。
+ */
+
+const chart = {
+  setOption: vi.fn(),
+  resize: vi.fn(),
+  dispose: vi.fn(),
+  getDataURL: vi.fn(() => "data:image/png;base64,AAAA"),
+  getOption: vi.fn(() => ({ dataZoom: [{ start: 0, end: 100 }] })),
+  on: vi.fn(),
+  off: vi.fn(),
+  dispatchAction: vi.fn(),
+  getZr: vi.fn(() => ({ on: vi.fn(), off: vi.fn() })),
+  convertToPixel: vi.fn(() => [0, 0]),
+  getWidth: vi.fn(() => 600),
+  getHeight: vi.fn(() => 400),
+};
+
+vi.mock("echarts", () => ({
+  init: () => chart,
+  use: () => {},
+  registerTheme: () => {},
+  graphic: {
+    LinearGradient: class {
+      constructor(..._args: unknown[]) {}
+    },
+  },
+}));
+vi.mock("echarts-gl", () => ({}));
+
+import ChartBar from "./Bar";
+import ChartLine from "./Line";
+import ChartPie from "./Pie";
+import ChartBubble from "./Bubble";
+import ChartHeatmap from "./Heatmap";
+import ChartPolar from "./Polar";
+import ChartRadar from "./Radar";
+import ChartCommon from "./Common";
+import ChartGauge from "./Gauge";
+import ChartPie3D from "./Pie/Pie3D";
+
+// Chart.Bubble 要等 ResizeObserver 报出容器尺寸才会 init，jsdom 的空实现永远不回调，
+// 这里补一个观察即回调的实现
+class FiringResizeObserver {
+  constructor(private cb: ResizeObserverCallback) {}
+  observe(target: Element) {
+    this.cb(
+      [
+        {
+          target,
+          contentRect: { width: 600, height: 400 },
+        } as unknown as ResizeObserverEntry,
+      ],
+      this as unknown as ResizeObserver,
+    );
+  }
+  unobserve() {}
+  disconnect() {}
+}
+(globalThis as { ResizeObserver?: unknown }).ResizeObserver =
+  FiringResizeObserver;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+    width: 600,
+    height: 400,
+    top: 0,
+    left: 0,
+    right: 600,
+    bottom: 400,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect);
+});
+
+const X_AXIS = ["一", "二", "三", "四"];
+const SERIES = [{ name: "A", value: [1, 2, 3, 4] }];
+const SERIES_2 = [{ name: "A", value: [9, 9, 9, 9] }];
+const PIE_DATA = [{ name: "a", value: 1 }];
+const PIE_DATA_2 = [{ name: "a", value: 2 }];
+const BUBBLE_DATA = [{ name: "a", value: 1 }];
+const BUBBLE_DATA_2 = [{ name: "a", value: 5 }];
+const HEATMAP_DATA: Array<[number, number, number]> = [[0, 0, 1]];
+const HEATMAP_DATA_2: Array<[number, number, number]> = [[0, 0, 7]];
+const RADAR_INDICATORS = [{ name: "a", max: 10 }];
+const RADAR_DATA = [1];
+const RADAR_DATA_2 = [8];
+const POLAR_SERIES = { value: 1, name: "a" };
+const POLAR_SERIES_2 = { value: 8, name: "a" };
+const COMMON_SERIES = [{ type: "bar" as const, data: [1, 2, 3] }];
+const COMMON_SERIES_2 = [{ type: "bar" as const, data: [4, 5, 6] }];
+const GAUGE_DATA = [{ value: 1, name: "a" }];
+const GAUGE_DATA_2 = [{ value: 6, name: "a" }];
+const PIE3D_DATA = [{ name: "a", value: 1 }];
+const PIE3D_DATA_2 = [{ name: "a", value: 4 }];
+
+/** 每个组件：[名字, 组件, 稳定 props, 会真正改变配置的 props] */
+const cases: Array<
+  [string, React.ComponentType<Record<string, unknown>>, Record<string, unknown>, Record<string, unknown>]
+> = [
+  [
+    "Chart.Bar",
+    ChartBar as React.ComponentType<Record<string, unknown>>,
+    { xAxisData: X_AXIS, seriesData: SERIES },
+    { seriesData: SERIES_2 },
+  ],
+  [
+    "Chart.Line",
+    ChartLine as React.ComponentType<Record<string, unknown>>,
+    { xAxisData: X_AXIS, seriesData: SERIES },
+    { seriesData: SERIES_2 },
+  ],
+  [
+    "Chart.Pie",
+    ChartPie as React.ComponentType<Record<string, unknown>>,
+    { seriesData: PIE_DATA },
+    { seriesData: PIE_DATA_2 },
+  ],
+  [
+    "Chart.Bubble",
+    ChartBubble as React.ComponentType<Record<string, unknown>>,
+    { data: BUBBLE_DATA },
+    { data: BUBBLE_DATA_2 },
+  ],
+  [
+    "Chart.Heatmap",
+    ChartHeatmap as React.ComponentType<Record<string, unknown>>,
+    { data: HEATMAP_DATA },
+    { data: HEATMAP_DATA_2 },
+  ],
+  [
+    "Chart.Polar",
+    ChartPolar as React.ComponentType<Record<string, unknown>>,
+    { seriesData: POLAR_SERIES },
+    { seriesData: POLAR_SERIES_2 },
+  ],
+  [
+    "Chart.Radar",
+    ChartRadar as React.ComponentType<Record<string, unknown>>,
+    { indicators: RADAR_INDICATORS, data: RADAR_DATA },
+    { data: RADAR_DATA_2 },
+  ],
+  [
+    "Chart.Gauge",
+    ChartGauge as React.ComponentType<Record<string, unknown>>,
+    { seriesData: GAUGE_DATA },
+    { seriesData: GAUGE_DATA_2 },
+  ],
+  [
+    "Chart.Pie.Three",
+    ChartPie3D as React.ComponentType<Record<string, unknown>>,
+    { pieData: PIE3D_DATA },
+    { pieData: PIE3D_DATA_2 },
+  ],
+  [
+    "Chart.Common",
+    ChartCommon as React.ComponentType<Record<string, unknown>>,
+    { xAxis: { type: "category" as const }, series: COMMON_SERIES },
+    { series: COMMON_SERIES_2 },
+  ],
+];
+
+describe("chartOption 的 useMemo 依赖必须是值", () => {
+  for (const [name, Comp, stableProps, changedProps] of cases) {
+    describe(name, () => {
+      it("父组件重渲染但配置未变 → 不重设 option", () => {
+        let bump: () => void = () => {};
+
+        function Consumer() {
+          const [, setTick] = useState(0);
+          bump = () => setTick((n) => n + 1);
+
+          return <Comp {...stableProps} />;
+        }
+
+        render(<Consumer />);
+        const initial = chart.setOption.mock.calls.length;
+        expect(initial).toBeGreaterThan(0);
+
+        act(() => bump());
+        act(() => bump());
+        act(() => bump());
+
+        expect(chart.setOption.mock.calls.length).toBe(initial);
+      });
+
+      it("配置真变了 → 仍然重设 option", () => {
+        let change: () => void = () => {};
+
+        function Consumer() {
+          const [changed, setChanged] = useState(false);
+          change = () => setChanged(true);
+
+          return (
+            <Comp
+              {...stableProps}
+              {...(changed ? changedProps : {})}
+            />
+          );
+        }
+
+        render(<Consumer />);
+        const initial = chart.setOption.mock.calls.length;
+
+        act(() => change());
+
+        expect(chart.setOption.mock.calls.length).toBeGreaterThan(initial);
+      });
+    });
+  }
+});

package/src/components/Checkbox/CheckboxGroup/index.tsx

@@ -9,6 +9,9 @@ import styles from "./index.module.scss";
 
 const Group = Checkbox.Group;
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_OPTIONS: AntdCheckboxGroupProps["options"] = [];
+
 export interface CheckboxGroupProps extends AntdCheckboxGroupProps {
   outline?: boolean;
   hasAll?: boolean;
@@ -21,7 +24,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
     className,
     outline,
     hasAll,
-    options = [],
+    options = EMPTY_OPTIONS,
     value,
     onChange,
     layout = "horizontal",

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

@@ -7,12 +7,15 @@ export interface FormCodeMirrorProps extends ItemContainerProps {
   componentProps?: CodeMirrorProps;
 }
 
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_RULES: ItemContainerProps["rules"] = [];
+
 const FormCodeMirror: React.FC<FormCodeMirrorProps> = (props) => {
   const {
     componentProps = {},
     className: itemClassName,
     disabled,
-    rules = [],
+    rules = EMPTY_RULES,
     name,
     ...formItemProps
   } = props;

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,