@hsu-react/ui 2.5.4 → 2.5.6

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);
@@ -173,6 +182,12 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
   const onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
@@ -197,8 +212,11 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
     chart.on("mouseover", handleMouseOver);
     chart.on("globalout", handleGlobalOut);
-    if (onClick) {
-      chart.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chart.on("click", handleClick);
     }
 
     return () => {
@@ -206,8 +224,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
       if (chart) {
         chart.off("mouseover", handleMouseOver);
         chart.off("globalout", handleGlobalOut);
-        if (onClick) {
-          chart.off("click", onClick);
+        if (hasOnClick) {
+          chart.off("click", handleClick);
         }
       }
     };
@@ -217,7 +235,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleMouseOver,
     handleGlobalOut,
     onChartRef,
-    onClick,
+    onClickRef,
+    hasOnClick,
     containerReady,
   ]);
 

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
@@ -255,6 +263,12 @@ const ChartPie: ChartPieFC = (props) => {
 
   const onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
@@ -283,8 +297,11 @@ const ChartPie: ChartPieFC = (props) => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend auto-scroll
@@ -307,8 +324,8 @@ const ChartPie: ChartPieFC = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
       // Clean up legend scrolling
@@ -321,7 +338,8 @@ const ChartPie: ChartPieFC = (props) => {
     chartOption,
     handleResize,
     onChartRef,
-    onClick,
+    onClickRef,
+    hasOnClick,
     enableLegendAutoScroll,
     seriesData,
     legendVisibleCount,

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/Sankey/index.tsx

@@ -3,6 +3,7 @@ import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
+import useLatestRef from "../../../hooks/useLatestRef";
 
 type SankeyNodeItemOption = echarts.SankeySeriesOption["data"];
 type SankeyEdgeItemOption = echarts.SankeySeriesOption["links"];
@@ -101,6 +102,13 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
     return option;
   }, [seriesData, seriesLinks, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  const getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   const handleResize = useCallback(() => {
     // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
@@ -123,7 +131,7 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", () => {
-        getImage?.(
+        getImageRef.current?.(
           chart!.getDataURL({
             type: "png",
             pixelRatio: 1,
@@ -149,9 +157,7 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage,
-    containerReady,
-  ]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(() => {

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

@@ -8,6 +8,7 @@ import {
   SeriesData,
 } from "..";
 import * as echarts from "echarts";
+import useLatestRef from "../../../hooks/useLatestRef";
 import { deepCopy } from "hsu-utils";
 import { handleTreeData } from "../_utils/tree";
 
@@ -41,6 +42,13 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return option;
   }, [seriesData, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  const getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   const handleResize = useCallback(() => {
     // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
@@ -63,7 +71,7 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", () => {
-        getImage?.(
+        getImageRef.current?.(
           chart!.getDataURL({
             type: "png",
             pixelRatio: 1,
@@ -89,9 +97,7 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage,
-    containerReady,
-  ]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(() => {

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

@@ -0,0 +1,315 @@
+import React, { useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+
+/**
+ * 这一组用例盯的是同一条缺陷：**回调 prop 进 effect 依赖数组**。
+ *
+ * 消费方写内联箭头（`onXxx={(v) => setV(v)}`）时每次渲染都是新引用，
+ * 回调进依赖数组 → effect 重跑 → 重新 setOption / 重新注册监听 / 再发一次通知，
+ * 通知里再 setState 就是死循环。
+ *
+ * 但这些回调同时还被当作「要不要注册这个监听」的真值判断，
+ * 所以修法不能是「把回调从依赖数组里删掉」了事——
+ * 「从无到有传入回调」必须仍然能正确注册，这里每个组件都单独验一条。
+ */
+
+type Handler = (params: unknown) => void;
+
+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(),
+};
+const handlers = new Map<string, Set<Handler>>();
+
+chart.on.mockImplementation(((event: string, handler: Handler) => {
+  if (!handlers.has(event)) handlers.set(event, new Set());
+  handlers.get(event)!.add(handler);
+}) as never);
+chart.off.mockImplementation(((event: string, handler?: Handler) => {
+  if (!handler) handlers.delete(event);
+  else handlers.get(event)?.delete(handler);
+}) as never);
+
+const emit = (event: string, params?: unknown) => {
+  act(() => {
+    handlers.get(event)?.forEach((h) => h(params));
+  });
+};
+const listenerCount = (event: string) => handlers.get(event)?.size ?? 0;
+
+vi.mock("echarts", () => ({
+  init: () => chart,
+  use: () => {},
+  registerTheme: () => {},
+  graphic: {},
+}));
+vi.mock("echarts-gl", () => ({}));
+
+import ChartBar from "./Bar";
+import ChartLine from "./Line";
+import ChartSankey from "./Sankey";
+import ChartTree from "./Tree";
+import ChartPie from "./Pie";
+
+// 容器必须量得到尺寸，否则 useContainerReady 不放行 echarts.init
+beforeEach(() => {
+  handlers.clear();
+  vi.clearAllMocks();
+  chart.getOption.mockImplementation(() => ({
+    dataZoom: [{ start: 0, end: 100 }],
+  }));
+  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 SANKEY_NODES = [{ name: "a" }, { name: "b" }];
+const SANKEY_LINKS = [{ source: "a", target: "b" }];
+const TREE_DATA = [{ name: "root", value: 1, children: [] }];
+const PIE_DATA = [{ name: "a", value: 1 }];
+
+describe("Chart.Bar / Chart.Line 的回调 prop", () => {
+  const cases = [
+    ["Chart.Bar", ChartBar],
+    ["Chart.Line", ChartLine],
+  ] as const;
+
+  for (const [name, Comp] of cases) {
+    describe(name, () => {
+      it("内联 onDataZoomWindowChanged 写回 state 不会死循环，窗口没变也不重复通知", () => {
+        const spy = vi.fn();
+
+        function Consumer() {
+          const [, setWin] = useState<unknown>(null);
+
+          return (
+            <Comp
+              xAxisData={X_AXIS}
+              seriesData={SERIES}
+              // 内联箭头：每次渲染都是新引用
+              onDataZoomWindowChanged={(w) => {
+                spy(w);
+                setWin(w);
+              }}
+            />
+          );
+        }
+
+        render(<Consumer />);
+
+        // 初次同步一次窗口；进了循环这里会是几十上百次
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith({ startIndex: 0, endIndex: 3 });
+      });
+
+      it("onClick 换引用不重复注册监听，且调到的是最新的那个", () => {
+        const first = vi.fn();
+        const second = vi.fn();
+
+        const { rerender } = render(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} onClick={first} />,
+        );
+        expect(listenerCount("click")).toBe(1);
+
+        rerender(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} onClick={second} />,
+        );
+        // 换引用不该拆装监听，更不该重新 setOption
+        expect(listenerCount("click")).toBe(1);
+
+        emit("click", { name: "x" });
+        expect(first).not.toHaveBeenCalled();
+        expect(second).toHaveBeenCalledTimes(1);
+      });
+
+      it("onLegendSelectChanged 从无到有传入时仍会注册", () => {
+        const { rerender } = render(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} />,
+        );
+        // 没传就不注册
+        expect(listenerCount("legendselectchanged")).toBe(0);
+
+        const spy = vi.fn();
+        rerender(
+          <Comp
+            xAxisData={X_AXIS}
+            seriesData={SERIES}
+            onLegendSelectChanged={spy}
+          />,
+        );
+        expect(listenerCount("legendselectchanged")).toBe(1);
+
+        emit("legendselectchanged", { selected: { A: false } });
+        expect(spy).toHaveBeenCalledWith({ A: false });
+      });
+
+      it("onDataZoomWindowChanged 从无到有传入时仍会注册并同步一次窗口", () => {
+        const { rerender } = render(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} />,
+        );
+        expect(listenerCount("datazoom")).toBe(0);
+
+        const spy = vi.fn();
+        rerender(
+          <Comp
+            xAxisData={X_AXIS}
+            seriesData={SERIES}
+            onDataZoomWindowChanged={spy}
+          />,
+        );
+        expect(listenerCount("datazoom")).toBe(1);
+        expect(spy).toHaveBeenCalledWith({ startIndex: 0, endIndex: 3 });
+
+        spy.mockClear();
+        emit("datazoom", { start: 25, end: 100 });
+        expect(spy).toHaveBeenCalledWith({ startIndex: 1, endIndex: 3 });
+      });
+
+      it("传回调后又撤掉时监听会摘干净", () => {
+        const { rerender } = render(
+          <Comp
+            xAxisData={X_AXIS}
+            seriesData={SERIES}
+            onLegendSelectChanged={() => {}}
+          />,
+        );
+        expect(listenerCount("legendselectchanged")).toBe(1);
+
+        rerender(<Comp xAxisData={X_AXIS} seriesData={SERIES} />);
+        expect(listenerCount("legendselectchanged")).toBe(0);
+      });
+    });
+  }
+});
+
+describe("Chart.Sankey / Chart.Tree 的 getImage", () => {
+  it("Sankey：getImage 换引用不重新 setOption，出图时调到的是最新的那个", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { rerender } = render(
+      <ChartSankey
+        seriesData={SANKEY_NODES}
+        seriesLinks={SANKEY_LINKS}
+        getImage={first}
+      />,
+    );
+    const before = chart.setOption.mock.calls.length;
+
+    rerender(
+      <ChartSankey
+        seriesData={SANKEY_NODES}
+        seriesLinks={SANKEY_LINKS}
+        getImage={second}
+      />,
+    );
+    // 出图回调不是画图的输入，换引用不该让图重画
+    expect(chart.setOption.mock.calls.length).toBe(before);
+
+    emit("finished");
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it("Sankey：内联 getImage 把图存进 state 不会死循环", () => {
+    const spy = vi.fn();
+
+    function Consumer() {
+      const [, setImg] = useState("");
+
+      return (
+        <ChartSankey
+          seriesData={SANKEY_NODES}
+          seriesLinks={SANKEY_LINKS}
+          getImage={(img) => {
+            spy(img);
+            setImg(img);
+          }}
+        />
+      );
+    }
+
+    render(<Consumer />);
+    emit("finished");
+    emit("finished");
+
+    // finished 触发几次就回调几次，不会自激放大
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it("Tree：getImage 换引用不重新 setOption，出图时调到的是最新的那个", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { rerender } = render(
+      <ChartTree seriesData={TREE_DATA} getImage={first} />,
+    );
+    const before = chart.setOption.mock.calls.length;
+
+    rerender(<ChartTree seriesData={TREE_DATA} getImage={second} />);
+    expect(chart.setOption.mock.calls.length).toBe(before);
+
+    emit("finished");
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it("Tree：从无到有传入 getImage 时仍能拿到图", () => {
+    const spy = vi.fn();
+    const { rerender } = render(<ChartTree seriesData={TREE_DATA} />);
+
+    emit("finished");
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<ChartTree seriesData={TREE_DATA} getImage={spy} />);
+    emit("finished");
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Chart.Pie 的 onClick", () => {
+  it("换引用不重复注册，且调到最新引用", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { rerender } = render(
+      <ChartPie seriesData={PIE_DATA} onClick={first} />,
+    );
+    expect(listenerCount("click")).toBe(1);
+
+    rerender(<ChartPie seriesData={PIE_DATA} onClick={second} />);
+    expect(listenerCount("click")).toBe(1);
+
+    emit("click", { name: "a" });
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it("从无到有传入 onClick 时仍会注册", () => {
+    const spy = vi.fn();
+    const { rerender } = render(<ChartPie seriesData={PIE_DATA} />);
+    expect(listenerCount("click")).toBe(0);
+
+    rerender(<ChartPie seriesData={PIE_DATA} onClick={spy} />);
+    expect(listenerCount("click")).toBe(1);
+
+    emit("click", { name: "a" });
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});