@hsu-react/ui 2.5.4 → 2.5.5

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

@@ -8,6 +8,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 { deepCopy } from "hsu-utils";
 import { handleTreeData } from "../_utils/tree";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,6 +39,13 @@ var Tree = function Tree(props) {
     return option;
   }, [seriesData, series]);
 
+  // getImage 只是「出图后把 dataURL 交出去」的出口，既不决定图怎么画，
+  // 也不该决定要不要重画。它进依赖数组会让 effect 跟着重跑 → setOption(notMerge)
+  // → 图重绘 → 再触发一次 finished → 再回调；消费方把图存进 state 就是死循环。
+  // 而且 finished 监听只在首次 init 时注册，闭包里锁死的是首帧的 getImage，
+  // 后续换了引用永远调不到 —— 依赖数组写了它也没用，是条死依赖。走 ref 两个问题一起解决。
+  var getImageRef = useLatestRef(getImage);
+
   // Callback handling chart resize
   var handleResize = useCallback(function () {
     var _chartInstanceRef$cur;
@@ -60,7 +68,8 @@ var Tree = function Tree(props) {
 
       // Attach the finished event listener on first initialization
       chart.on("finished", function () {
-        getImage === null || getImage === void 0 || getImage(chart.getDataURL({
+        var _getImageRef$current;
+        (_getImageRef$current = getImageRef.current) === null || _getImageRef$current === void 0 || _getImageRef$current.call(getImageRef, chart.getDataURL({
           type: "png",
           pixelRatio: 1,
           backgroundColor: "#fff"
@@ -84,7 +93,7 @@ var Tree = function Tree(props) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage, containerReady]);
+  }, [chartOption, handleResize, getImageRef, containerReady]);
 
   // Clean up resources on unmount
   useEffect(function () {

package/es/components/Select/_hooks/useSelectComposition.js

@@ -14,6 +14,7 @@ export function useSelectComposition(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isComposing = _useState2[0],
     setComposing = _useState2[1];
+  var hasOnSearch = !!onSearch;
   useEffect(function () {
     var compositionend = function compositionend() {
       setComposing(false);
@@ -21,7 +22,7 @@ export function useSelectComposition(_ref) {
     var compositionstart = function compositionstart() {
       setComposing(true);
     };
-    if (onSearch) {
+    if (hasOnSearch) {
       window.addEventListener("compositionstart", compositionstart);
       window.addEventListener("compositionend", compositionend);
     }
@@ -29,7 +30,10 @@ export function useSelectComposition(_ref) {
       window.removeEventListener("compositionstart", compositionstart);
       window.removeEventListener("compositionend", compositionend);
     };
-  }, [onSearch]);
+    // onSearch 在这里只被当作「要不要监听输入法事件」的真值判断，effect 体从不调它。
+    // 直接进依赖数组的话，消费方传内联箭头就会每渲染一次拆一次、装一次 window 监听；
+    // 只取「有没有传」这个布尔量，从无到有时照样会重新注册。
+  }, [hasOnSearch]);
   return {
     isComposing: isComposing
   };

package/es/components/Table/_hooks/useAutoScrolling.js

@@ -7,6 +7,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useMutationObserver } from "ahooks";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 var DEFAULT_INTERVAL = 2000;
 var DEFAULT_SPEED = 25;
 var SMOOTH_SCROLL_TICK = 10;
@@ -29,6 +30,13 @@ var useAutoScrolling = function useAutoScrolling(props) {
     autoScrollLoopMode = _props$autoScrollLoop2 === void 0 ? "reset" : _props$autoScrollLoop2,
     _props$autoScrollingO = props.autoScrollingOffset,
     autoScrollingOffset = _props$autoScrollingO === void 0 ? 0 : _props$autoScrollingO;
+
+  // onAutoScrollEndAdd 在这里身兼两职：既是「有没有加载更多」的开关，又是真正去加载的动作。
+  // 整个 rAF 循环（loop → 依赖它 → 启停 effect 依赖 loop）都挂在它的引用上，
+  // 消费方传内联箭头就会每渲染一次重启一次滚动循环 —— 表格滚到一半被打回起点。
+  // 拆成两半：开关看布尔量（从无到有传入时仍会正确接上加载更多），动作取 ref 里的最新引用。
+  var onAutoScrollEndAddRef = useLatestRef(onAutoScrollEndAdd);
+  var hasOnAutoScrollEndAdd = !!onAutoScrollEndAdd;
   var validSpeed = autoScrollingSpeed > 0 ? autoScrollingSpeed : DEFAULT_SPEED;
   var smoothStep = validSpeed * SMOOTH_SCROLL_TICK / 1000;
   var _useState = useState(false),
@@ -260,11 +268,12 @@ var useAutoScrolling = function useAutoScrolling(props) {
     }, SMOOTH_SCROLL_TICK);
   }, [bindHover, checkSeamlessReset, clearSmoothTimer, getBody, interval, isAtBottom, isBodyScrollable, isSeamless, smoothStep]);
   var runLoadMore = useCallback(function () {
-    if (!onAutoScrollEndAdd || pendingLoadMoreRef.current) return;
+    var loadMore = onAutoScrollEndAddRef.current;
+    if (!loadMore || pendingLoadMoreRef.current) return;
     pendingLoadMoreRef.current = true;
     phaseRef.current = "loading";
     var token = ++loadTokenRef.current;
-    onAutoScrollEndAdd().then(function (hasMore) {
+    loadMore().then(function (hasMore) {
       if (token !== loadTokenRef.current) return;
       var currentBody = getBody();
       if (hasMore) {
@@ -284,7 +293,7 @@ var useAutoScrolling = function useAutoScrolling(props) {
       if (token !== loadTokenRef.current) return;
       pendingLoadMoreRef.current = false;
     });
-  }, [autoScrollLoop, getBody, onAutoScrollEndAdd]);
+  }, [autoScrollLoop, getBody, onAutoScrollEndAddRef]);
   var loop = useCallback(function () {
     rafRef.current = requestAnimationFrame(loop);
     if (!autoScrolling || !ready || !(dataSource !== null && dataSource !== void 0 && dataSource.length) || !(ref !== null && ref !== void 0 && ref.current)) {
@@ -316,7 +325,7 @@ var useAutoScrolling = function useAutoScrolling(props) {
         // In seamless mode the scroll never actually reaches the bottom; just keep scrolling
         phaseRef.current = "idle";
       } else if (isAtBottom(body)) {
-        if (onAutoScrollEndAdd) {
+        if (hasOnAutoScrollEndAdd) {
           runLoadMore();
         } else {
           if (autoScrollLoop) {
@@ -362,7 +371,7 @@ var useAutoScrolling = function useAutoScrolling(props) {
       return;
     }
     startSmoothStep(body, targetTop);
-  }, [autoScrollMode, autoScrollLoop, autoScrolling, bindHover, checkSeamlessReset, dataSource, getBody, getRowHeight, interval, isAtBottom, isBodyScrollable, isSeamless, onAutoScrollEndAdd, ready, ref, runLoadMore, setupSeamlessClones, startSmoothStep]);
+  }, [autoScrollMode, autoScrollLoop, autoScrolling, bindHover, checkSeamlessReset, dataSource, getBody, getRowHeight, interval, isAtBottom, isBodyScrollable, isSeamless, hasOnAutoScrollEndAdd, ready, ref, runLoadMore, setupSeamlessClones, startSmoothStep]);
   useEffect(function () {
     if (!autoScrolling || !ready || !(dataSource !== null && dataSource !== void 0 && dataSource.length) || !(ref !== null && ref !== void 0 && ref.current)) {
       cleanup();
@@ -387,7 +396,7 @@ var useAutoScrolling = function useAutoScrolling(props) {
       cleanupClones();
       return;
     }
-    if (onAutoScrollEndAdd) {
+    if (hasOnAutoScrollEndAdd) {
       // In load-more mode, if scrolling had stopped, resume auto-scrolling when new data arrives
       if (phaseRef.current === "stopped") {
         phaseRef.current = autoScrollMode === "row" ? "wait" : "idle";
@@ -400,7 +409,7 @@ var useAutoScrolling = function useAutoScrolling(props) {
       phaseRef.current = autoScrollMode === "row" ? "wait" : "idle";
       waitUntilRef.current = autoScrollMode === "row" ? performance.now() + interval : 0;
     }
-  }, [autoScrollMode, cleanupClones, dataSource, getBody, interval, isBodyScrollable, isSeamless, onAutoScrollEndAdd]);
+  }, [autoScrollMode, cleanupClones, dataSource, getBody, interval, isBodyScrollable, isSeamless, hasOnAutoScrollEndAdd]);
   useEffect(function () {
     if (!autoScrolling || !(ref !== null && ref !== void 0 && ref.current)) return;
     var resizeRaf = null;

package/es/layout/Menu/_hooks/useOnlyLvOneMenu.js

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { useLocation } from "react-router";
 /**
  * Handle the top-level-only menu logic
@@ -10,16 +11,22 @@ export var useOnlyLvOneMenu = function useOnlyLvOneMenu(_ref) {
     setOpenkeys = _ref.setOpenkeys,
     setMenuKey = _ref.setMenuKey;
   var location = useLocation();
+  // getCurrChildItems 是 effect 体里发出去的通知，本身进依赖数组是这一类死循环的标准配方：
+  // 消费方传内联箭头 → 每次渲染新引用 → effect 重跑 → setOpenkeys([item.key]) 每次都是
+  // 新数组必定触发重渲染 → 又是新引用 …… 直到 React 抛 Maximum update depth exceeded。
+  // 通知取 ref 里的最新引用，依赖数组只留真正的输入。
+  var getCurrChildItemsRef = useLatestRef(getCurrChildItems);
   useEffect(function () {
     if (onlyLvOneMenu) {
       var item = items.find(function (i) {
         return i.key === "/" + location.pathname.split("/").filter(Boolean)[0];
       });
       if (item) {
-        getCurrChildItems === null || getCurrChildItems === void 0 || getCurrChildItems(item.children || []);
+        var _getCurrChildItemsRef;
+        (_getCurrChildItemsRef = getCurrChildItemsRef.current) === null || _getCurrChildItemsRef === void 0 || _getCurrChildItemsRef.call(getCurrChildItemsRef, item.children || []);
         setOpenkeys([item.key]);
         setMenuKey(item.key);
       }
     }
-  }, [items, getCurrChildItems, location, onlyLvOneMenu, setOpenkeys, setMenuKey]);
+  }, [items, getCurrChildItemsRef, location, onlyLvOneMenu, setOpenkeys, setMenuKey]);
 };

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

@@ -257,6 +257,12 @@ const Bubble = props => {
   }, [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
@@ -282,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, onChartRef, 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/Heatmap/index.js

@@ -194,6 +194,12 @@ const Heatmap = props => {
   }, []);
   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
@@ -222,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, onChartRef, 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)(() => {