@hsu-react/ui 2.5.4 → 2.5.6

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

@@ -9,7 +9,15 @@ import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
 import { useLatestRef } from "../../../../hooks/useLatestRef";
+import useShallowStable from "../../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 memo 恒不命中；提到模块级常量
+var DEFAULT_TOOLTIP = {
+  show: false
+};
+var DEFAULT_LABEL = {
+  show: true
+};
 var ChartPie3D = function ChartPie3D(props) {
   var className = props.className,
     style = props.style,
@@ -33,18 +41,18 @@ var ChartPie3D = function ChartPie3D(props) {
     _props$yOffset = props.yOffset,
     yOffset = _props$yOffset === void 0 ? -0.2 : _props$yOffset,
     _props$tooltip = props.tooltip,
-    tooltip = _props$tooltip === void 0 ? {
-      show: false
-    } : _props$tooltip,
+    tooltip = _props$tooltip === void 0 ? DEFAULT_TOOLTIP : _props$tooltip,
     _props$label = props.label,
-    label = _props$label === void 0 ? {
-      show: true
-    } : _props$label,
+    label = _props$label === void 0 ? DEFAULT_LABEL : _props$label,
     _props$enableMouseCon = props.enableMouseControl,
     enableMouseControl = _props$enableMouseCon === void 0 ? false : _props$enableMouseCon,
     onChart = props.onChart,
     onClick = props.onClick,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -92,6 +100,12 @@ var ChartPie3D = function ChartPie3D(props) {
   });
   var onChartRef = useLatestRef(onChart);
 
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  var onClickRef = useLatestRef(onClick);
+  var hasOnClick = !!onClick;
+
   // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
   // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(function () {
@@ -112,20 +126,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, onChartRef, onClick, containerReady]);
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChartRef, onClickRef, hasOnClick, containerReady]);
   useEffect(function () {
     return function () {
       if (resizeObserverRef.current) {

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

@@ -20,7 +20,10 @@ import { autoScrollLegend } from "../chartUtils";
 import styles from "../index.module.scss";
 import ChartPie3D from "./Pie3D";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+var EMPTY_EXTEND_SERIES = [];
 var ChartPie = function ChartPie(props) {
   var className = props.className,
     style = props.style,
@@ -32,7 +35,7 @@ var ChartPie = function ChartPie(props) {
     title = props.title,
     onChart = props.onChart,
     _props$extendSeries = props.extendSeries,
-    extendSeries = _props$extendSeries === void 0 ? [] : _props$extendSeries,
+    extendSeries = _props$extendSeries === void 0 ? EMPTY_EXTEND_SERIES : _props$extendSeries,
     onClick = props.onClick,
     _props$enableLegendAu = props.enableLegendAutoScroll,
     enableLegendAutoScroll = _props$enableLegendAu === void 0 ? false : _props$enableLegendAu,
@@ -48,7 +51,11 @@ var ChartPie = function ChartPie(props) {
     spanAngle = _props$spanAngle === void 0 ? 180 : _props$spanAngle,
     center = props.center,
     radius = props.radius,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why
@@ -210,6 +217,12 @@ var ChartPie = function ChartPie(props) {
   }, []);
   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
@@ -239,9 +252,13 @@ var ChartPie = function ChartPie(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);
     }
 
     // Legend auto-scroll
@@ -262,9 +279,9 @@ var ChartPie = function ChartPie(props) {
     // 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);
       }
 
       // Clean up legend scrolling
@@ -273,7 +290,7 @@ var ChartPie = function ChartPie(props) {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onChartRef, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
+  }, [chartOption, handleResize, onChartRef, onClickRef, hasOnClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
 
   // Clean up resources when the component unmounts
   useEffect(function () {

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

@@ -11,7 +11,10 @@ import * as echarts from "echarts";
 import useContainerReady from "../_hooks/useContainerReady";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+var DEFAULT_COLOR = ["#00FFA3", "#00FFA3"];
 var Polar = function Polar(props) {
   var className = props.className,
     style = props.style,
@@ -26,8 +29,12 @@ var Polar = function Polar(props) {
     textStyle = props.textStyle,
     seriesData = props.seriesData,
     _props$color = props.color,
-    color = _props$color === void 0 ? ["#00FFA3", "#00FFA3"] : _props$color,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    color = _props$color === void 0 ? DEFAULT_COLOR : _props$color,
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -17,6 +17,7 @@ import * as echarts from "echarts";
 import useContainerReady from "../_hooks/useContainerReady";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 /** Single-indicator tooltip trigger mode
  * - `point`  triggers only when hovering data points/lines (native echarts item trigger)
@@ -38,7 +39,11 @@ var Radar = function Radar(props) {
     singleIndicatorTooltipProp = _props$singleIndicato === void 0 ? false : _props$singleIndicato,
     singleIndicatorMode = props.singleIndicatorMode,
     singleIndicatorHoverFill = props.singleIndicatorHoverFill,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -14,6 +14,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 Sankey = function Sankey(props) {
   var className = props.className,
@@ -103,6 +104,13 @@ var Sankey = function Sankey(props) {
     return option;
   }, [seriesData, seriesLinks, 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;
@@ -125,7 +133,8 @@ var Sankey = function Sankey(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"
@@ -149,7 +158,7 @@ var Sankey = function Sankey(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/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/hooks/useShallowStable.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+export declare function useShallowStable<T extends object>(value: T): T;
+export default useShallowStable;

package/es/hooks/useShallowStable.js

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+export function useShallowStable(value) {
+  var ref = useRef(value);
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  var aKeys = Object.keys(a);
+  var bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) {
+    var key = _aKeys[_i];
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (!Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+export default useShallowStable;

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]);
 }