@hsu-react/ui 2.5.3 → 2.5.5

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

@@ -24,6 +24,7 @@ import {
 } from "../_utils/cartesian";
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
+import useLatestRef from "../../../hooks/useLatestRef";
 
 export interface ChartLineProps extends ChartCommonProps {
   chartTitle?: string;
@@ -90,6 +91,36 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   const isDark = useIsDark();
   const chrome = useMemo(() => resolveChartChrome(isDark), [isDark]);
 
+  // 回调 prop 一律走 useLatestRef，不进依赖数组：消费方传内联箭头（React 里最常见的
+  // 写法）时每次渲染都是新引用，进依赖数组会让「init + setOption(notMerge)」整段重跑，
+  // 还会把当前可视窗口再同步一次给父级 —— 父级据此改 state 就是死循环。
+  // 但「有没有传回调」决定要不要注册监听，所以单独拆成布尔量进依赖数组，
+  // 这样「从无到有传入回调」仍会重新注册，不会漏。
+  const onClickRef = useLatestRef(onClick);
+  const onLegendSelectChangedRef = useLatestRef(onLegendSelectChanged);
+  const onDataZoomWindowChangedRef = useLatestRef(onDataZoomWindowChanged);
+  const hasOnClick = !!onClick;
+  const hasOnLegendSelectChanged = !!onLegendSelectChanged;
+  const hasOnDataZoomWindowChanged = !!onDataZoomWindowChanged;
+  // 已通知过父级的窗口用 ref 记账（不参与渲染）：窗口没变就不再通知，
+  // 掐断「通知 → 父级重算坐标轴 → chartOption 变 → effect 重跑 → 再通知」的自激回路
+  const notifiedZoomWindowRef = useRef<DataZoomIndexWindow | null>(null);
+  const emitZoomWindow = useCallback(
+    (next: DataZoomIndexWindow) => {
+      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 = useMemo(() => {
     const def_xAxis = createDefaultCategoryXAxis(xAxisData, chrome);
@@ -326,18 +357,18 @@ const ChartLine: React.FC<ChartLineProps> = (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() as ChartsOption | undefined)
         ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
       const zoom = zooms?.[0];
       const totalLen = xAxisData?.length ?? 0;
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
-        onDataZoomWindowChanged(
+        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),
         });
@@ -353,18 +384,21 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    // Add click event（注册与否看布尔量，实际调用取最新引用）
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend selection event
     const handleLegendSelectChanged = (params: unknown) => {
-      onLegendSelectChanged?.(
+      onLegendSelectChangedRef.current?.(
         (params as { selected: Record<string, boolean> }).selected,
       );
     };
-    if (onLegendSelectChanged) {
+    if (hasOnLegendSelectChanged) {
       chartInstanceRef.current?.on(
         "legendselectchanged",
         handleLegendSelectChanged,
@@ -390,7 +424,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         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)),
         });
@@ -398,7 +432,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         typeof info?.start === "number" &&
         typeof info?.end === "number"
       ) {
-        onDataZoomWindowChanged?.(
+        emitZoomWindow(
           percentWindowToIndexWindow(
             info.start,
             info.end,
@@ -407,7 +441,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         );
       }
     };
-    if (onDataZoomWindowChanged) {
+    if (hasOnDataZoomWindowChanged) {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
@@ -443,18 +477,18 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     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);
       }
 
@@ -466,9 +500,12 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   }, [
     chartOption,
     handleResize,
-    onClick,
-    onLegendSelectChanged,
-    onDataZoomWindowChanged,
+    onClickRef,
+    onLegendSelectChangedRef,
+    hasOnClick,
+    hasOnLegendSelectChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
     xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
@@ -505,9 +542,9 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
-      onWindowChange: onDataZoomWindowChanged
+      onWindowChange: hasOnDataZoomWindowChanged
         ? (startPercent, endPercent) =>
-            onDataZoomWindowChanged(
+            emitZoomWindow(
               percentWindowToIndexWindow(
                 startPercent,
                 endPercent,
@@ -523,7 +560,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     normalizedScroll,
     sliderDataZoom,
     xAxisData,
-    onDataZoomWindowChanged,
+    hasOnDataZoomWindowChanged,
+    emitZoomWindow,
   ]);
 
   // Clean up resources when the component unmounts

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -7,6 +7,7 @@ import { ChartCommonProps, ChartOptionType, ChartsOption } from "../..";
 import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
+import { useLatestRef } from "../../../../hooks/useLatestRef";
 
 export interface Pie3DDataItem {
   name: string;
@@ -170,6 +171,16 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     { minHeight, maxHeight, yOffset, autoRotate }
   );
 
+  const onChartRef = useLatestRef(onChart);
+
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑会重建
+  // 3D 饼的 option 并重播动画。注册与否看布尔量（保证「从无到有传入」仍会注册），
+  // 实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
 
@@ -177,7 +188,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     chart.setOption(chartOption as ChartOptionType, true);
@@ -192,8 +203,11 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
     chart.on("mouseover", handleMouseOver);
     chart.on("globalout", handleGlobalOut);
-    if (onClick) {
-      chart.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chart.on("click", handleClick);
     }
 
     return () => {
@@ -201,8 +215,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
       if (chart) {
         chart.off("mouseover", handleMouseOver);
         chart.off("globalout", handleGlobalOut);
-        if (onClick) {
-          chart.off("click", onClick);
+        if (hasOnClick) {
+          chart.off("click", handleClick);
         }
       }
     };
@@ -211,8 +225,9 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleResize,
     handleMouseOver,
     handleGlobalOut,
-    onChart,
-    onClick,
+    onChartRef,
+    onClickRef,
+    hasOnClick,
     containerReady,
   ]);
 

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

@@ -13,6 +13,7 @@ import { autoScrollLegend } from "../chartUtils";
 
 import styles from "../index.module.scss";
 import ChartPie3D, { ChartPie3DProps } from "./Pie3D";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface ChartPieProps extends ChartCommonProps {
   chartTitle?: string;
@@ -252,6 +253,16 @@ const ChartPie: ChartPieFC = (props) => {
     chartInstanceRef.current?.resize();
   }, []);
 
+  const onChartRef = useLatestRef(onChart);
+
+  // onClick 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 跟着重跑就会
+  // 再走一遍 setOption(notMerge)，动画重播、悬浮/高亮态被清掉。注册与否看布尔量，
+  // 这样「从无到有传入 onClick」仍会注册；实际调用取 ref 里的最新引用。
+  const onClickRef = useLatestRef(onClick);
+  const hasOnClick = !!onClick;
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // Initialize the chart
   useEffect(() => {
     if (!chartRef.current || !containerReady) return;
@@ -262,7 +273,7 @@ const ChartPie: ChartPieFC = (props) => {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
       // Call the onChart callback on first initialization
-      onChart?.(chart);
+      onChartRef.current?.(chart);
     }
 
     // Apply the option
@@ -278,8 +289,11 @@ const ChartPie: ChartPieFC = (props) => {
     }
 
     // Add click event
-    if (onClick) {
-      chartInstanceRef.current?.on("click", onClick);
+    const handleClick = (event: echarts.ECElementEvent) => {
+      onClickRef.current?.(event);
+    };
+    if (hasOnClick) {
+      chartInstanceRef.current?.on("click", handleClick);
     }
 
     // Legend auto-scroll
@@ -302,8 +316,8 @@ const ChartPie: ChartPieFC = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
 
-      if (onClick) {
-        chartInstanceRef.current?.off("click", onClick);
+      if (hasOnClick) {
+        chartInstanceRef.current?.off("click", handleClick);
       }
 
       // Clean up legend scrolling
@@ -315,8 +329,9 @@ const ChartPie: ChartPieFC = (props) => {
   }, [
     chartOption,
     handleResize,
-    onChart,
-    onClick,
+    onChartRef,
+    onClickRef,
+    hasOnClick,
     enableLegendAutoScroll,
     seriesData,
     legendVisibleCount,

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

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

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

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