@hsu-react/ui 2.5.3 → 2.5.5

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

@@ -4,8 +4,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Equal } from "hsu-utils";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 export function useChainGraphData(props) {
   var graph = props.graph,
     data = props.data,
@@ -22,6 +23,29 @@ export function useChainGraphData(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     isLayouting = _useState4[0],
     setIsLayouting = _useState4[1];
+
+  // 这三个回调都是「交给图实例、由它在后续事件里回调」的出口，不是数据本身。
+  // 它们进依赖数组是条死依赖：effect 体被 ObjEqual(lastData, data) 挡住，
+  // 引用变了也不会重新 setData —— 图里存的还是首次 setData 时那个闭包，
+  // 换了引用永远调不到（stale closure）。改成引用恒定的转发函数：
+  // 依赖数组只留真正的输入（graph/data/level/rootLevel），调用时总是取到最新的回调。
+  var getImageRef = useLatestRef(getImage);
+  var labelRenderRef = useLatestRef(labelRender);
+  var onLayoutingChangeRef = useLatestRef(onLayoutingChange);
+  var emitImage = useCallback(function (img) {
+    var _getImageRef$current;
+    (_getImageRef$current = getImageRef.current) === null || _getImageRef$current === void 0 || _getImageRef$current.call(getImageRef, img);
+  }, [getImageRef]);
+  // labelRender 在 ChainGraphServices.setData 里是「传了才改写 label」的真值判断，
+  // 所以这里保留「有没有传」的语义：没传就传 undefined，传了才给转发函数。
+  var renderLabel = useCallback(function (label) {
+    return labelRenderRef.current(label);
+  }, [labelRenderRef]);
+  var emitLayouting = useCallback(function (value) {
+    var _onLayoutingChangeRef;
+    setIsLayouting(value);
+    (_onLayoutingChangeRef = onLayoutingChangeRef.current) === null || _onLayoutingChangeRef === void 0 || _onLayoutingChangeRef.call(onLayoutingChangeRef, value);
+  }, [onLayoutingChangeRef]);
   useEffect(function () {
     if (graph && !Equal.ObjEqual(lastData, data)) {
       setLastData(data);
@@ -29,15 +53,12 @@ export function useChainGraphData(props) {
         data: data,
         level: level,
         rootLevel: rootLevel,
-        getImage: getImage,
-        isLayouting: function isLayouting(value) {
-          setIsLayouting(value);
-          onLayoutingChange === null || onLayoutingChange === void 0 || onLayoutingChange(value);
-        },
-        labelRender: 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: isLayouting
   };

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

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

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

@@ -16,6 +16,7 @@ import { autoScrollByItem } from "../_utils/autoSmooth";
 import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultValueYAxis, getSliderShow, percentWindowToIndexWindow, resolveScrollConfig } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartBar = function ChartBar(props) {
   var className = props.className,
@@ -62,6 +63,30 @@ var ChartBar = function ChartBar(props) {
     return resolveChartChrome(isDark);
   }, [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  var onClickRef = useLatestRef(onClick);
+  var onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  var onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  var hasOnClick = !!onClick;
+  var hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  var hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  var notifiedZoomWindowRef = useRef(null);
+  var emitZoomWindow = useCallback(function (next) {
+    var _onDataZoomWindowChan;
+    var prev = notifiedZoomWindowRef.current;
+    if (prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex) {
+      return;
+    }
+    notifiedZoomWindowRef.current = next;
+    (_onDataZoomWindowChan = onDataZoomWindowChangedRef.current) === null || _onDataZoomWindowChan === void 0 || _onDataZoomWindowChan.call(onDataZoomWindowChangedRef, next);
+  }, [onDataZoomWindowChangedRef]);
+
   // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
@@ -239,16 +264,16 @@ var ChartBar = function 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) {
       var _chart$getOption3, _xAxisData$length2;
       var zooms = (_chart$getOption3 = chart.getOption()) === null || _chart$getOption3 === void 0 ? void 0 : _chart$getOption3.dataZoom;
       var zoom = zooms === null || zooms === void 0 ? void 0 : zooms[0];
       var totalLen = (_xAxisData$length2 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length2 !== void 0 ? _xAxisData$length2 : 0;
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
-        onDataZoomWindowChanged(percentWindowToIndexWindow(zoom.start, zoom.end, totalLen));
+        emitZoomWindow(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)
         });
@@ -264,17 +289,22 @@ var ChartBar = function ChartBar(props) {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Legend selection event
     var handleLegendSelectChanged = function handleLegendSelectChanged(params) {
-      onLegendSelectChanged === null || onLegendSelectChanged === void 0 || onLegendSelectChanged(params.selected);
+      var _onLegendSelectChange;
+      (_onLegendSelectChange = onLegendSelectChangedRef.current) === null || _onLegendSelectChange === void 0 || _onLegendSelectChange.call(onLegendSelectChangedRef, params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       var _chartInstanceRef$cur3;
       (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.on("legendselectchanged", handleLegendSelectChanged);
     }
@@ -285,16 +315,16 @@ var ChartBar = function ChartBar(props) {
       var raw = params;
       var info = (_raw$batch$ = raw === null || raw === void 0 || (_raw$batch = raw.batch) === null || _raw$batch === void 0 ? void 0 : _raw$batch[0]) !== null && _raw$batch$ !== void 0 ? _raw$batch$ : raw;
       if (typeof (info === null || info === void 0 ? void 0 : info.startValue) === "number" && typeof (info === null || info === void 0 ? void 0 : info.endValue) === "number") {
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue))
         });
       } else if (typeof (info === null || info === void 0 ? void 0 : info.start) === "number" && typeof (info === null || info === void 0 ? void 0 : info.end) === "number") {
         var _xAxisData$length3;
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
+        emitZoomWindow(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       var _chartInstanceRef$cur4;
       (_chartInstanceRef$cur4 = chartInstanceRef.current) === null || _chartInstanceRef$cur4 === void 0 || _chartInstanceRef$cur4.on("datazoom", handleDataZoom);
     }
@@ -322,15 +352,15 @@ var ChartBar = function ChartBar(props) {
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur5;
-        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", onClick);
+        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", handleClick);
       }
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         var _chartInstanceRef$cur6;
         (_chartInstanceRef$cur6 = chartInstanceRef.current) === null || _chartInstanceRef$cur6 === void 0 || _chartInstanceRef$cur6.off("legendselectchanged", handleLegendSelectChanged);
       }
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         var _chartInstanceRef$cur7;
         (_chartInstanceRef$cur7 = chartInstanceRef.current) === null || _chartInstanceRef$cur7 === void 0 || _chartInstanceRef$cur7.off("datazoom", handleDataZoom);
       }
@@ -339,7 +369,7 @@ var ChartBar = function 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]);
 
@@ -359,13 +389,13 @@ var ChartBar = function ChartBar(props) {
         startIndex: normalizedScroll.startIndex,
         autoPlay: normalizedScroll.autoScroll,
         enableWheelScroll: enableWheelScroll,
-        onWindowChange: onDataZoomWindowChanged ? function (startPercent, endPercent) {
-          return onDataZoomWindowChanged(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
+        onWindowChange: hasOnDataZoomWindowChanged ? function (startPercent, endPercent) {
+          return emitZoomWindow(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
         } : undefined
       }),
       dispose = _autoScrollByItem.dispose;
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -21,6 +21,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { defaultBubbleColorList, drawCircles } from "../_utils/bubble";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 // Extended data item type containing all properties the chart needs
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -276,7 +277,16 @@ var Bubble = function Bubble(props) {
       chartInstanceRef.current.setOption(chartOption, true);
     }
   }, [chartOption, data]);
+  var onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
     if (!chartRef.current) return;
@@ -286,10 +296,11 @@ var Bubble = function Bubble(props) {
     // Initialize or reuse the existing instance
     var chart = chartInstanceRef.current;
     if (!chart) {
+      var _onChartRef$current;
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart === null || onChart === void 0 || onChart(chart);
+      (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
     }
 
     // Resize first so echarts picks up the correct container size, then apply the option
@@ -300,20 +311,24 @@ var Bubble = function Bubble(props) {
     window.addEventListener("resize", handleResize);
 
     // Add click event
-    if (onClick) {
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur3;
-        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
+        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.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
   useEffect(function () {

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

@@ -11,6 +11,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Common = function Common(props) {
   var className = props.className,
@@ -38,9 +39,13 @@ var Common = function Common(props) {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
   }, []);
+  var onChartRef = useLatestRef(onChart);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
+    var _onChartRef$current;
     if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse an existing instance
@@ -54,7 +59,7 @@ var Common = function Common(props) {
     chart.setOption(chartOption, true);
 
     // Chart-ready callback (can be used for legend auto-scroll, etc.)
-    onChart === null || onChart === void 0 || onChart(chart);
+    (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
 
     // Add resize listener
     window.addEventListener("resize", handleResize);
@@ -69,7 +74,7 @@ var Common = function Common(props) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart, containerReady]);
+  }, [chartOption, handleResize, onChartRef, containerReady]);
 
   // Clean up resources on component unmount
   useEffect(function () {

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

@@ -20,6 +20,7 @@ import * as echarts from "echarts";
 import { createDefaultHeatmapXAxis, createDefaultHeatmapYAxis } from "../_utils/heatmap";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Heatmap = function Heatmap(props) {
   var className = props.className,
@@ -192,7 +193,16 @@ var Heatmap = function Heatmap(props) {
     if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     (_chartInstanceRef$cur = chartInstanceRef.current) === null || _chartInstanceRef$cur === void 0 || _chartInstanceRef$cur.resize();
   }, []);
+  var onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(function () {
     if (!chartRef.current || !containerReady) return;
@@ -200,10 +210,11 @@ var Heatmap = function Heatmap(props) {
     // Initialize or reuse the existing instance
     var chart = chartInstanceRef.current;
     if (!chart) {
+      var _onChartRef$current;
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart === null || onChart === void 0 || onChart(chart);
+      (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
     }
 
     // Apply the option
@@ -219,20 +230,24 @@ var Heatmap = function Heatmap(props) {
     }
 
     // Add click event
-    if (onClick) {
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur3;
-        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", onClick);
+        (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.off("click", handleClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, containerReady]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -16,6 +16,7 @@ import { autoScrollByItem } from "../_utils/autoSmooth";
 import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultValueYAxis, getSliderShow, percentWindowToIndexWindow, resolveScrollConfig } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartLine = function ChartLine(props) {
   var className = props.className,
@@ -62,6 +63,30 @@ var ChartLine = function ChartLine(props) {
     return resolveChartChrome(isDark);
   }, [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  var onClickRef = useLatestRef(onClick);
+  var onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  var onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  var hasOnClick = !!onClick;
+  var hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  var hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  var notifiedZoomWindowRef = useRef(null);
+  var emitZoomWindow = useCallback(function (next) {
+    var _onDataZoomWindowChan;
+    var prev = notifiedZoomWindowRef.current;
+    if (prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex) {
+      return;
+    }
+    notifiedZoomWindowRef.current = next;
+    (_onDataZoomWindowChan = onDataZoomWindowChangedRef.current) === null || _onDataZoomWindowChan === void 0 || _onDataZoomWindowChan.call(onDataZoomWindowChangedRef, next);
+  }, [onDataZoomWindowChangedRef]);
+
   // Cache the chart option with useMemo
   var chartOption = useMemo(function () {
     var _xAxisData$length, _ref, _ref2;
@@ -236,16 +261,16 @@ var ChartLine = function 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) {
       var _chart$getOption3, _xAxisData$length2;
       var zooms = (_chart$getOption3 = chart.getOption()) === null || _chart$getOption3 === void 0 ? void 0 : _chart$getOption3.dataZoom;
       var zoom = zooms === null || zooms === void 0 ? void 0 : zooms[0];
       var totalLen = (_xAxisData$length2 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length2 !== void 0 ? _xAxisData$length2 : 0;
       if (typeof (zoom === null || zoom === void 0 ? void 0 : zoom.start) === "number" && typeof (zoom === null || zoom === void 0 ? void 0 : zoom.end) === "number") {
-        onDataZoomWindowChanged(percentWindowToIndexWindow(zoom.start, zoom.end, totalLen));
+        emitZoomWindow(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)
         });
@@ -261,17 +286,22 @@ var ChartLine = function ChartLine(props) {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
       var _chartInstanceRef$cur2;
-      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", onClick);
+      (_chartInstanceRef$cur2 = chartInstanceRef.current) === null || _chartInstanceRef$cur2 === void 0 || _chartInstanceRef$cur2.on("click", handleClick);
     }
 
     // Legend selection event
     var handleLegendSelectChanged = function handleLegendSelectChanged(params) {
-      onLegendSelectChanged === null || onLegendSelectChanged === void 0 || onLegendSelectChanged(params.selected);
+      var _onLegendSelectChange;
+      (_onLegendSelectChange = onLegendSelectChangedRef.current) === null || _onLegendSelectChange === void 0 || _onLegendSelectChange.call(onLegendSelectChangedRef, params.selected);
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       var _chartInstanceRef$cur3;
       (_chartInstanceRef$cur3 = chartInstanceRef.current) === null || _chartInstanceRef$cur3 === void 0 || _chartInstanceRef$cur3.on("legendselectchanged", handleLegendSelectChanged);
     }
@@ -282,16 +312,16 @@ var ChartLine = function ChartLine(props) {
       var raw = params;
       var info = (_raw$batch$ = raw === null || raw === void 0 || (_raw$batch = raw.batch) === null || _raw$batch === void 0 ? void 0 : _raw$batch[0]) !== null && _raw$batch$ !== void 0 ? _raw$batch$ : raw;
       if (typeof (info === null || info === void 0 ? void 0 : info.startValue) === "number" && typeof (info === null || info === void 0 ? void 0 : info.endValue) === "number") {
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged({
+        emitZoomWindow({
           startIndex: Math.max(0, Math.round(info.startValue)),
           endIndex: Math.max(0, Math.round(info.endValue))
         });
       } else if (typeof (info === null || info === void 0 ? void 0 : info.start) === "number" && typeof (info === null || info === void 0 ? void 0 : info.end) === "number") {
         var _xAxisData$length3;
-        onDataZoomWindowChanged === null || onDataZoomWindowChanged === void 0 || onDataZoomWindowChanged(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
+        emitZoomWindow(percentWindowToIndexWindow(info.start, info.end, (_xAxisData$length3 = xAxisData === null || xAxisData === void 0 ? void 0 : xAxisData.length) !== null && _xAxisData$length3 !== void 0 ? _xAxisData$length3 : 0));
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       var _chartInstanceRef$cur4;
       (_chartInstanceRef$cur4 = chartInstanceRef.current) === null || _chartInstanceRef$cur4 === void 0 || _chartInstanceRef$cur4.on("datazoom", handleDataZoom);
     }
@@ -319,15 +349,15 @@ var ChartLine = function ChartLine(props) {
     // Cleanup function
     return function () {
       window.removeEventListener("resize", handleResize);
-      if (onClick) {
+      if (hasOnClick) {
         var _chartInstanceRef$cur5;
-        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", onClick);
+        (_chartInstanceRef$cur5 = chartInstanceRef.current) === null || _chartInstanceRef$cur5 === void 0 || _chartInstanceRef$cur5.off("click", handleClick);
       }
-      if (onLegendSelectChanged) {
+      if (hasOnLegendSelectChanged) {
         var _chartInstanceRef$cur6;
         (_chartInstanceRef$cur6 = chartInstanceRef.current) === null || _chartInstanceRef$cur6 === void 0 || _chartInstanceRef$cur6.off("legendselectchanged", handleLegendSelectChanged);
       }
-      if (onDataZoomWindowChanged) {
+      if (hasOnDataZoomWindowChanged) {
         var _chartInstanceRef$cur7;
         (_chartInstanceRef$cur7 = chartInstanceRef.current) === null || _chartInstanceRef$cur7 === void 0 || _chartInstanceRef$cur7.off("datazoom", handleDataZoom);
       }
@@ -336,7 +366,7 @@ var ChartLine = function 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]);
 
@@ -356,13 +386,13 @@ var ChartLine = function ChartLine(props) {
         startIndex: normalizedScroll.startIndex,
         autoPlay: normalizedScroll.autoScroll,
         enableWheelScroll: enableWheelScroll,
-        onWindowChange: onDataZoomWindowChanged ? function (startPercent, endPercent) {
-          return onDataZoomWindowChanged(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
+        onWindowChange: hasOnDataZoomWindowChanged ? function (startPercent, endPercent) {
+          return emitZoomWindow(percentWindowToIndexWindow(startPercent, endPercent, xAxisData.length));
         } : undefined
       }),
       dispose = _autoScrollByItem.dispose;
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, hasOnDataZoomWindowChanged, emitZoomWindow]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -8,6 +8,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
+import { useLatestRef } from "../../../../hooks/useLatestRef";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartPie3D = function ChartPie3D(props) {
   var className = props.className,
@@ -89,13 +90,24 @@ var ChartPie3D = function ChartPie3D(props) {
     yOffset: yOffset,
     autoRotate: autoRotate
   });
+  var onChartRef = useLatestRef(onChart);
+
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(function () {
     if (!chartRef.current || !containerReady) return;
     var chart = chartInstanceRef.current;
     if (!chart) {
+      var _onChartRef$current;
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart === null || onChart === void 0 || onChart(chart);
+      (_onChartRef$current = onChartRef.current) === null || _onChartRef$current === void 0 || _onChartRef$current.call(onChartRef, chart);
     }
     chart.setOption(chartOption, true);
     optionRef.current = chartOption;
@@ -106,20 +118,24 @@ var ChartPie3D = function ChartPie3D(props) {
     }
     chart.on("mouseover", handleMouseOver);
     chart.on("globalout", handleGlobalOut);
-    if (onClick) {
-      chart.on("click", onClick);
+    var handleClick = function handleClick(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 || _onClickRef$current.call(onClickRef, event);
+    };
+    if (hasOnClick) {
+      chart.on("click", handleClick);
     }
     return function () {
       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]);
   useEffect(function () {
     return function () {
       if (resizeObserverRef.current) {