@hsu-react/ui 2.5.3 → 2.5.5

package/lib/components/ChainGraph/_hooks/useChainGraphData.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChainGraphData = useChainGraphData;
 var _react = require("react");
 var _hsuUtils = require("hsu-utils");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 function useChainGraphData(props) {
   const {
     graph,
@@ -18,6 +19,25 @@ function useChainGraphData(props) {
   } = props;
   const [lastData, setLastData] = (0, _react.useState)(undefined);
   const [isLayouting, setIsLayouting] = (0, _react.useState)(true);
+
+  // 这三个回调都是「交给图实例、由它在后续事件里回调」的出口，不是数据本身。
+  // 它们进依赖数组是条死依赖：effect 体被 ObjEqual(lastData, data) 挡住，
+  // 引用变了也不会重新 setData —— 图里存的还是首次 setData 时那个闭包，
+  // 换了引用永远调不到（stale closure）。改成引用恒定的转发函数：
+  // 依赖数组只留真正的输入（graph/data/level/rootLevel），调用时总是取到最新的回调。
+  const getImageRef = (0, _useLatestRef.useLatestRef)(getImage);
+  const labelRenderRef = (0, _useLatestRef.useLatestRef)(labelRender);
+  const onLayoutingChangeRef = (0, _useLatestRef.useLatestRef)(onLayoutingChange);
+  const emitImage = (0, _react.useCallback)(img => {
+    getImageRef.current?.(img);
+  }, [getImageRef]);
+  // labelRender 在 ChainGraphServices.setData 里是「传了才改写 label」的真值判断，
+  // 所以这里保留「有没有传」的语义：没传就传 undefined，传了才给转发函数。
+  const renderLabel = (0, _react.useCallback)(label => labelRenderRef.current(label), [labelRenderRef]);
+  const emitLayouting = (0, _react.useCallback)(value => {
+    setIsLayouting(value);
+    onLayoutingChangeRef.current?.(value);
+  }, [onLayoutingChangeRef]);
   (0, _react.useEffect)(() => {
     if (graph && !_hsuUtils.Equal.ObjEqual(lastData, data)) {
       setLastData(data);
@@ -25,15 +45,12 @@ function useChainGraphData(props) {
         data,
         level,
         rootLevel,
-        getImage,
-        isLayouting: value => {
-          setIsLayouting(value);
-          onLayoutingChange?.(value);
-        },
-        labelRender
+        getImage: emitImage,
+        isLayouting: emitLayouting,
+        labelRender: labelRenderRef.current ? renderLabel : undefined
       });
     }
-  }, [graph, data, level, rootLevel, getImage, labelRender, onLayoutingChange, lastData]);
+  }, [graph, data, level, rootLevel, lastData, emitImage, emitLayouting, renderLabel, labelRenderRef]);
   return {
     isLayouting
   };

package/lib/components/ChainGraph/_hooks/useChainGraphLayout.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useChainGraphLayout = useChainGraphLayout;
 var _react = require("react");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 function useChainGraphLayout(props) {
   const {
     graph,
@@ -12,9 +13,18 @@ function useChainGraphLayout(props) {
     rootLevel,
     getImage
   } = props;
+
+  // getImage 只是「布局完成后把截图 dataURL 交出去」的出口，不是布局的输入。
+  // 它进依赖数组会让消费方每传一次内联箭头就重新 changeLayout 一次 —— 整张图重排；
+  // 消费方再把截图存进 state，就变成「重排 → 出图 → setState → 新引用 → 再重排」的死循环。
+  // 用引用恒定的转发函数注册，调用时再取最新的 getImage。
+  const getImageRef = (0, _useLatestRef.useLatestRef)(getImage);
+  const emitImage = (0, _react.useCallback)(img => {
+    getImageRef.current?.(img);
+  }, [getImageRef]);
   (0, _react.useEffect)(() => {
     if (graph && octopus !== undefined) {
-      graph.changeLayout(octopus, rootLevel, getImage);
+      graph.changeLayout(octopus, rootLevel, emitImage);
     }
-  }, [graph, octopus, rootLevel, getImage]);
+  }, [graph, octopus, rootLevel, emitImage]);
 }

package/lib/components/Chart/Bar/index.js

@@ -13,6 +13,7 @@ var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
+var _useLatestRef = _interopRequireDefault(require("../../../hooks/useLatestRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -57,6 +58,29 @@ const ChartBar = props => {
   const isDark = (0, _useIsDark.default)();
   const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = (0, _useLatestRef.default)(onClick);
+  const onLegendSelectChangedRef = (0, _useLatestRef.default)(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = (0, _useLatestRef.default)(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = (0, _react.useRef)(null);
+  const emitZoomWindow = (0, _react.useCallback)(next => {
+    const prev = notifiedZoomWindowRef.current;
+    if (prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex) {
+      return;
+    }
+    notifiedZoomWindowRef.current = next;
+    onDataZoomWindowChangedRef.current?.(next);
+  }, [onDataZoomWindowChangedRef]);
+
   // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
     const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
@@ -241,15 +265,15 @@ const ChartBar = props => {
     }
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       const zooms = chart.getOption()?.dataZoom;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
+        emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
       } else {
         // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
-        onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1)
         });
@@ -265,16 +289,19 @@ const ChartBar = props => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = params => {
-      onLegendSelectChanged?.(params.selected);
+      onLegendSelectChangedRef.current?.(params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
     }
 
@@ -283,15 +310,15 @@ const ChartBar = props => {
       const raw = params;
       const info = raw?.batch?.[0] ?? raw;
       if (typeof info?.startValue === "number" && typeof info?.endValue === "number") {
-        onDataZoomWindowChanged?.({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue))
         });
       } else if (typeof info?.start === "number" && typeof info?.end === "number") {
-        onDataZoomWindowChanged?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+        emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -318,13 +345,13 @@ const ChartBar = props => {
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         chartInstanceRef.current?.off("legendselectchanged", handleLegendSelectChanged);
       }
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         chartInstanceRef.current?.off("datazoom", handleDataZoom);
       }
       if (legendScrollRef.current) {
@@ -332,7 +359,7 @@ const ChartBar = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
+  }, [chartOption, handleResize, onClickRef, onLegendSelectChangedRef, hasOnClick, hasOnLegendSelectChanged, hasOnDataZoomWindowChanged, emitZoomWindow, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
   // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
   normalizedScroll, containerReady]);
 
@@ -351,10 +378,10 @@ const ChartBar = props => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
+      onWindowChange: hasOnDataZoomWindowChanged ? (startPercent, endPercent) => emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Bubble/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _bubble = require("../_utils/bubble");
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -254,7 +255,16 @@ const Bubble = props => {
       chartInstanceRef.current.setOption(chartOption, true);
     }
   }, [chartOption, data]);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
@@ -267,7 +277,7 @@ const Bubble = props => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Resize first so echarts picks up the correct container size, then apply the option
@@ -278,18 +288,21 @@ const Bubble = props => {
     window.addEventListener("resize", handleResize);
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
     };
-  }, [chartOption, containerSize.width, containerSize.height, handleResize, onChart, onClick]);
+  }, [chartOption, containerSize.width, containerSize.height, handleResize, onChartRef, onClickRef, hasOnClick]);
 
   // Dispose the chart instance when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Common/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -41,7 +42,10 @@ const Common = props => {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
@@ -57,7 +61,7 @@ const Common = props => {
     chart.setOption(chartOption, true);
 
     // Chart-ready callback (can be used for legend auto-scroll, etc.)
-    onChart?.(chart);
+    onChartRef.current?.(chart);
 
     // Add resize listener
     window.addEventListener("resize", handleResize);
@@ -72,7 +76,7 @@ const Common = props => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart, containerReady]);
+  }, [chartOption, handleResize, onChartRef, containerReady]);
 
   // Clean up resources on component unmount
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Heatmap/index.js

@@ -11,6 +11,7 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _heatmap = require("../_utils/heatmap");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -191,7 +192,16 @@ const Heatmap = props => {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
@@ -202,7 +212,7 @@ const Heatmap = props => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -218,18 +228,21 @@ const Heatmap = props => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Line/index.js

@@ -13,6 +13,7 @@ var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
+var _useLatestRef = _interopRequireDefault(require("../../../hooks/useLatestRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -57,6 +58,29 @@ const ChartLine = props => {
   const isDark = (0, _useIsDark.default)();
   const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = (0, _useLatestRef.default)(onClick);
+  const onLegendSelectChangedRef = (0, _useLatestRef.default)(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = (0, _useLatestRef.default)(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = (0, _react.useRef)(null);
+  const emitZoomWindow = (0, _react.useCallback)(next => {
+    const prev = notifiedZoomWindowRef.current;
+    if (prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex) {
+      return;
+    }
+    notifiedZoomWindowRef.current = next;
+    onDataZoomWindowChangedRef.current?.(next);
+  }, [onDataZoomWindowChangedRef]);
+
   // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
     const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
@@ -238,15 +262,15 @@ const ChartLine = props => {
     }
 
     // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       const zooms = chart.getOption()?.dataZoom;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
+        emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
       } else {
         // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
-        onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1)
         });
@@ -262,16 +286,19 @@ const ChartLine = props => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = params => {
-      onLegendSelectChanged?.(params.selected);
+      onLegendSelectChangedRef.current?.(params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
     }
 
@@ -280,15 +307,15 @@ const ChartLine = props => {
       const raw = params;
       const info = raw?.batch?.[0] ?? raw;
       if (typeof info?.startValue === "number" && typeof info?.endValue === "number") {
-        onDataZoomWindowChanged?.({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue))
         });
       } else if (typeof info?.start === "number" && typeof info?.end === "number") {
-        onDataZoomWindowChanged?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+        emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -315,13 +342,13 @@ const ChartLine = props => {
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         chartInstanceRef.current?.off("legendselectchanged", handleLegendSelectChanged);
       }
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         chartInstanceRef.current?.off("datazoom", handleDataZoom);
       }
       if (legendScrollRef.current) {
@@ -329,7 +356,7 @@ const ChartLine = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
+  }, [chartOption, handleResize, onClickRef, onLegendSelectChangedRef, hasOnClick, hasOnLegendSelectChanged, hasOnDataZoomWindowChanged, emitZoomWindow, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
   // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
   normalizedScroll, containerReady]);
 
@@ -348,10 +375,10 @@ const ChartLine = props => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
+      onWindowChange: hasOnDataZoomWindowChanged ? (startPercent, endPercent) => emitZoomWindow((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Pie/Pie3D/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("./_hooks");
 var _option = require("./_utils/option");
 var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
+var _useLatestRef = require("../../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -84,13 +85,23 @@ const ChartPie3D = props => {
     yOffset,
     autoRotate
   });
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
+
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
     chart.setOption(chartOption, true);
     optionRef.current = chartOption;
@@ -101,20 +112,23 @@ const ChartPie3D = props => {
     }
     chart.on("mouseover", handleMouseOver);
     chart.on("globalout", handleGlobalOut);
-    if (onClick) {
-      chart.on("click", onClick);
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chart.on("click", handleClick);
     }
     return () => {
       window.removeEventListener("resize", handleResize);
       if (chart) {
         chart.off("mouseover", handleMouseOver);
         chart.off("globalout", handleGlobalOut);
-        if (onClick) {
-          chart.off("click", onClick);
+        if (hasOnClick) {
+          chart.off("click", handleClick);
         }
       }
     };
-  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChartRef, onClickRef, hasOnClick, containerReady]);
   (0, _react.useEffect)(() => {
     return () => {
       if (resizeObserverRef.current) {

package/lib/components/Chart/Pie/index.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _chartUtils = require("../chartUtils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _Pie3D = _interopRequireDefault(require("./Pie3D"));
+var _useLatestRef = require("../../../hooks/useLatestRef");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -200,7 +201,16 @@ const ChartPie = props => {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
+  const onChartRef = (0, _useLatestRef.useLatestRef)(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = (0, _useLatestRef.useLatestRef)(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current || !containerReady) return;
@@ -211,7 +221,7 @@ const ChartPie = props => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -227,8 +237,11 @@ const ChartPie = props => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = event => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend auto-scroll
@@ -249,8 +262,8 @@ const ChartPie = props => {
     // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
       // Clean up legend scrolling
@@ -259,7 +272,7 @@ const ChartPie = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {