@hsu-react/ui 2.5.3 → 2.5.5

package/src/components/Select/_hooks/useSelectComposition.test.ts

@@ -0,0 +1,47 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+import { useSelectComposition } from "./useSelectComposition";
+
+/**
+ * 这里的 onSearch 只被当作「要不要监听输入法事件」的真值判断，effect 体从不调它。
+ * 它直接进依赖数组，消费方传内联箭头就会每渲染一次拆装一次 window 监听。
+ */
+describe("useSelectComposition", () => {
+  let addSpy: ReturnType<typeof vi.spyOn>;
+
+  const countAdds = () =>
+    addSpy.mock.calls.filter(([type]) => type === "compositionstart").length;
+
+  beforeEach(() => {
+    addSpy = vi.spyOn(window, "addEventListener");
+  });
+  afterEach(() => {
+    addSpy.mockRestore();
+  });
+
+  it("没传 onSearch 不注册；从无到有传入时会注册", () => {
+    const { rerender } = renderHook(
+      ({ onSearch }: { onSearch?: (v: string) => void }) =>
+        useSelectComposition({ onSearch }),
+      { initialProps: {} as { onSearch?: (v: string) => void } },
+    );
+    expect(countAdds()).toBe(0);
+
+    rerender({ onSearch: () => {} });
+    expect(countAdds()).toBe(1);
+  });
+
+  it("onSearch 换引用不会反复拆装 window 监听", () => {
+    const { rerender } = renderHook(
+      ({ onSearch }: { onSearch?: (v: string) => void }) =>
+        useSelectComposition({ onSearch }),
+      { initialProps: { onSearch: () => {} } },
+    );
+    expect(countAdds()).toBe(1);
+
+    rerender({ onSearch: () => {} });
+    rerender({ onSearch: () => {} });
+    expect(countAdds()).toBe(1);
+  });
+});

package/src/components/Select/_hooks/useSelectComposition.ts

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

package/src/components/Select/_hooks/useSelectInputOptions.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { SelectOption } from "..";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 interface UseSelectInputOptionsProps {
   searchValue: string;
@@ -20,19 +21,15 @@ export function useSelectInputOptions({
   optionsLength,
 }: UseSelectInputOptionsProps) {
   const [inputOptions, setInputOptions] = useState<SelectOption[]>([]);
+  const onSearchRef = useLatestRef(onSearch);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
     if (!isComposing) {
-      onSearch?.(searchValue);
+      onSearchRef.current?.(searchValue);
     }
-  }, [
-    inputOptions,
-    isComposing,
-    onChange,
-    onSearch,
-    optionsLength,
-    searchValue,
-  ]);
+  }, [inputOptions, isComposing, onSearchRef, optionsLength, searchValue]);
 
   return { inputOptions, setInputOptions };
 }

package/src/components/Slider/index.tsx

@@ -2,7 +2,7 @@ import {
   Slider as AntdSlider,
   SliderSingleProps as AntdSliderSingleProps,
 } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import classNames from "classnames";
 import styles from "./index.module.scss";
@@ -14,27 +14,37 @@ export interface SliderProps extends AntdSliderSingleProps {
 const Slider: React.FC<SliderProps> = (props) => {
   const { className, value = 0, topValue, onChange, ...sliderConfig } = props;
   const [_value, setValue] = useState<number>(value);
-  const [lastValue, setLastValue] = useState<number>(value);
+  // 最近一次通知出去的值，代替原来那个用 state 记账的写法
+  const notifiedRef = useRef<number>(value);
 
-  useEffect(() => {
-    if (_value !== lastValue) {
-      setLastValue(_value);
-      onChange?.(_value);
-    }
-  }, [lastValue, onChange, _value]);
+  /**
+   * `onChange` 是「用户拖了滑块」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `Input/TextArea/index.tsx` 里那段
+   * 说明——旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const handleChange = (next: number) => {
+    setValue(next);
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange?.(next);
+  };
 
+  // 外部值（`value` / `topValue`）变了才回写，不跟着通知走
   useEffect(() => {
-    if ((topValue || value) !== lastValue) {
-      setValue(topValue || value);
+    const next = topValue || value;
+    if (next !== notifiedRef.current) {
+      notifiedRef.current = next;
+      setValue(next);
     }
-  }, [lastValue, topValue, value]);
+  }, [topValue, value]);
 
   return (
     <AntdSlider
       className={classNames([styles.slider, className])}
       tooltip={{ open: false }}
       value={_value}
-      onChange={setValue}
+      onChange={handleChange}
       {...sliderConfig}
     />
   );

package/src/components/Table/_hooks/useAutoScrolling.test.tsx

@@ -0,0 +1,95 @@
+import React, { useRef } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, render, waitFor } from "@testing-library/react";
+
+import useAutoScrolling from "./useAutoScrolling";
+
+/**
+ * onAutoScrollEndAdd 在这个 hook 里身兼两职：既是「有没有加载更多」的开关，
+ * 又是真正去加载的动作。整条 rAF 循环挂在它的引用上（loop 依赖它、启停 effect 依赖 loop），
+ * 消费方传内联箭头就会每渲染一次重启一次滚动循环 —— 表格滚到一半被打回起点。
+ */
+
+const DATA = [{ key: "1" }, { key: "2" }];
+
+function Host({
+  onAutoScrollEndAdd,
+}: {
+  onAutoScrollEndAdd?: () => Promise<boolean>;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useAutoScrolling({
+    autoScrolling: true,
+    ref,
+    dataSource: DATA,
+    onAutoScrollEndAdd,
+  });
+
+  return (
+    <div ref={ref}>
+      <div className="ant-table-body">
+        <table>
+          <tbody className="ant-table-tbody" />
+        </table>
+      </div>
+    </div>
+  );
+}
+
+describe("useAutoScrolling", () => {
+  let cancelSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    // 让 rAF 不真的跑，cancelAnimationFrame 就只会由 effect 的 cleanup 触发，
+    // 于是「循环有没有被重启」可以直接数出来
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation(
+      () => 1 as unknown as number,
+    );
+    cancelSpy = vi
+      .spyOn(window, "cancelAnimationFrame")
+      .mockImplementation(() => {});
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /** hook 靠 MutationObserver 把自己标成 ready，这里手动改一次 DOM 触发它 */
+  const makeReady = async (container: HTMLElement) => {
+    await act(async () => {
+      container
+        .querySelector(".ant-table-tbody")!
+        .appendChild(document.createElement("tr"));
+      await Promise.resolve();
+    });
+    await waitFor(() =>
+      expect(window.requestAnimationFrame).toHaveBeenCalled(),
+    );
+  };
+
+  it("onAutoScrollEndAdd 换引用不会重启滚动循环", async () => {
+    const { container, rerender } = render(
+      <Host onAutoScrollEndAdd={() => Promise.resolve(true)} />,
+    );
+    await makeReady(container);
+
+    const before = cancelSpy.mock.calls.length;
+
+    rerender(<Host onAutoScrollEndAdd={() => Promise.resolve(true)} />);
+    rerender(<Host onAutoScrollEndAdd={() => Promise.resolve(true)} />);
+
+    expect(cancelSpy.mock.calls.length).toBe(before);
+  });
+
+  it("从无到有传入 onAutoScrollEndAdd 时会接上加载更多（循环按新开关重建一次）", async () => {
+    const { container, rerender } = render(<Host />);
+    await makeReady(container);
+
+    const before = cancelSpy.mock.calls.length;
+
+    rerender(<Host onAutoScrollEndAdd={() => Promise.resolve(true)} />);
+
+    // 开关从 false 变 true，循环必须按新语义重建，否则「加载更多」永远接不上
+    expect(cancelSpy.mock.calls.length).toBeGreaterThan(before);
+  });
+});

package/src/components/Table/_hooks/useAutoScrolling.ts

@@ -1,6 +1,7 @@
 import { useMutationObserver } from "ahooks";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { TableProps } from "..";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 const DEFAULT_INTERVAL = 2000;
 const DEFAULT_SPEED = 25;
@@ -39,6 +40,13 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
     autoScrollingOffset = 0,
   } = props;
 
+  // onAutoScrollEndAdd 在这里身兼两职：既是「有没有加载更多」的开关，又是真正去加载的动作。
+  // 整个 rAF 循环（loop → 依赖它 → 启停 effect 依赖 loop）都挂在它的引用上，
+  // 消费方传内联箭头就会每渲染一次重启一次滚动循环 —— 表格滚到一半被打回起点。
+  // 拆成两半：开关看布尔量（从无到有传入时仍会正确接上加载更多），动作取 ref 里的最新引用。
+  const onAutoScrollEndAddRef = useLatestRef(onAutoScrollEndAdd);
+  const hasOnAutoScrollEndAdd = !!onAutoScrollEndAdd;
+
   const validSpeed =
     autoScrollingSpeed > 0 ? autoScrollingSpeed : DEFAULT_SPEED;
   const smoothStep = (validSpeed * SMOOTH_SCROLL_TICK) / 1000;
@@ -324,12 +332,13 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
   );
 
   const runLoadMore = useCallback(() => {
-    if (!onAutoScrollEndAdd || pendingLoadMoreRef.current) return;
+    const loadMore = onAutoScrollEndAddRef.current;
+    if (!loadMore || pendingLoadMoreRef.current) return;
     pendingLoadMoreRef.current = true;
     phaseRef.current = "loading";
     const token = ++loadTokenRef.current;
 
-    onAutoScrollEndAdd()
+    loadMore()
       .then((hasMore) => {
         if (token !== loadTokenRef.current) return;
         const currentBody = getBody();
@@ -352,7 +361,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
         if (token !== loadTokenRef.current) return;
         pendingLoadMoreRef.current = false;
       });
-  }, [autoScrollLoop, getBody, onAutoScrollEndAdd]);
+  }, [autoScrollLoop, getBody, onAutoScrollEndAddRef]);
 
   const loop = useCallback(() => {
     rafRef.current = requestAnimationFrame(loop);
@@ -391,7 +400,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
         // 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) {
@@ -457,7 +466,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
     isAtBottom,
     isBodyScrollable,
     isSeamless,
-    onAutoScrollEndAdd,
+    hasOnAutoScrollEndAdd,
     ready,
     ref,
     runLoadMore,
@@ -506,7 +515,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
       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";
@@ -530,7 +539,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
     interval,
     isBodyScrollable,
     isSeamless,
-    onAutoScrollEndAdd,
+    hasOnAutoScrollEndAdd,
   ]);
 
   useEffect(() => {

package/src/components/Upload/_hooks/useUploadFileList.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { UploadFile } from "antd";
 import { deepCopy, Equal } from "hsu-utils";
 import { extractFileUrl } from "../_utils";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 interface UseUploadFileListProps {
   fileList?: UploadFile[];
@@ -19,7 +20,10 @@ export function useUploadFileList({
 }: UseUploadFileListProps) {
   const [_fileList, setFilelist] = useState<UploadFile[]>([]);
   const [lastFileList, setLastFileList] = useState<UploadFile[]>([]);
+  const onChangeRef = useLatestRef(onChange);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
     if (rmFile) {
       const file = _fileList.find((item) => item.uid === rmFile);
@@ -27,14 +31,14 @@ export function useUploadFileList({
       if (file) {
         setFilelist(filteredList);
         setTimeout(() => {
-          onChange?.({
+          onChangeRef.current?.({
             file,
             fileList: filteredList,
           });
         }, 100);
       }
     }
-  }, [_fileList, onChange, rmFile]);
+  }, [_fileList, onChangeRef, rmFile]);
 
   useEffect(() => {
     if (!Equal.ObjEqual(fileList ?? [], lastFileList)) {

package/src/components/Upload/_hooks/useUploadOperations.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { deepCopy, Equal } from "hsu-utils";
 import { UploadingList } from "..";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 interface UseUploadOperationsProps {
   onUploadingList?: (list: UploadingList) => void;
@@ -25,6 +26,8 @@ export function useUploadOperations({
     uploadingList: {},
   });
 
+  const onUploadingListRef = useLatestRef(onUploadingList);
+
   // Sync to the ref on update
   useEffect(() => {
     operationsRef.current.downloading = downloading;
@@ -34,12 +37,14 @@ export function useUploadOperations({
     operationsRef.current.uploadingList = uploadingList;
   }, [uploadingList]);
 
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
     if (!Equal.ObjEqual(uploadingList, lastUploadList)) {
-      onUploadingList?.(deepCopy(uploadingList));
+      onUploadingListRef.current?.(deepCopy(uploadingList));
       setLastUploadList(deepCopy(uploadingList));
     }
-  }, [uploadingList, lastUploadList, onUploadingList]);
+  }, [uploadingList, lastUploadList, onUploadingListRef]);
 
   // Cleanup function
   useEffect(() => {

package/src/hooks/useLatestRef.ts

@@ -0,0 +1,31 @@
+import { useRef } from "react";
+
+/**
+ * 把一个每次渲染都可能换引用的值（通常是回调 prop）装进一个**引用恒定**的 ref。
+ *
+ * 用途只有一个：让 effect 不必把回调放进依赖数组。
+ * 回调放进依赖数组、effect 体内又调它，是一条会让消费方死循环的写法——
+ * 消费方传内联箭头（`onChange={(v) => setX(v)}`，React 里最常见的写法）时
+ * 每次渲染都是新引用 → effect 重跑 → 调回调 → 父级 setState → 再渲染 →
+ * 又是新引用 …… 直到 React 抛 `Maximum update depth exceeded`。
+ *
+ * ```ts
+ * const onDoneRef = useLatestRef(onDone);
+ * useEffect(() => {
+ *   const t = setTimeout(() => onDoneRef.current?.(), 1000);
+ *   return () => clearTimeout(t);
+ * }, [onDoneRef]); // 只在挂载时跑一次，且永远调到最新的 onDone
+ * ```
+ *
+ * 注意：渲染期间就地赋值。React 官方对 ref 的约束是「不要在渲染中**读**可变值」，
+ * 写入最新的 props 是 useEffectEvent 落地前的通行做法（ahooks 的 `useLatest`、
+ * React 文档里的 `useEvent` polyfill 都是这么写的）。
+ */
+export function useLatestRef<T>(value: T) {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return ref;
+}
+
+export default useLatestRef;

package/src/layout/Menu/_hooks/useOnlyLvOneMenu.test.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+import { useOnlyLvOneMenu } from "./useOnlyLvOneMenu";
+import type { MenuType } from "..";
+
+const ITEMS = [
+  { key: "/orch", label: "编排", children: [{ key: "/orch/a", label: "A" }] },
+] as unknown as MenuType[];
+
+/**
+ * 这个 effect 干的是：路由变了就把当前一级菜单的子项交给消费方，并同步展开态。
+ * getCurrChildItems 是 effect 体里发出去的通知 —— 它进依赖数组，
+ * 配上每次都新建数组的 setOpenkeys([item.key])，就是标准的死循环配方。
+ */
+function Host({ onChildren }: { onChildren: (c: MenuType[]) => void }) {
+  const [, setOpenkeys] = useState<string[]>([]);
+  const [, setMenuKey] = useState("");
+  const [children, setChildren] = useState<MenuType[]>([]);
+
+  useOnlyLvOneMenu({
+    items: ITEMS,
+    onlyLvOneMenu: true,
+    // 内联箭头 + 每次都是新数组：最坏情况的消费方写法
+    getCurrChildItems: (c) => {
+      onChildren(c);
+      setChildren([...c]);
+    },
+    setOpenkeys,
+    setMenuKey,
+  });
+
+  return <div data-testid="count">{children.length}</div>;
+}
+
+describe("useOnlyLvOneMenu", () => {
+  it("内联 getCurrChildItems 回写 state 不会死循环", () => {
+    const spy = vi.fn();
+
+    const { getByTestId } = render(
+      <MemoryRouter
+        initialEntries={["/orch/a"]}
+        future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
+      >
+        <Host onChildren={spy} />
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId("count").textContent).toBe("1");
+    // 进了循环这里会是几十上百次，直到 React 抛 Maximum update depth exceeded
+    expect(spy.mock.calls.length).toBeLessThanOrEqual(2);
+    expect(spy).toHaveBeenCalledWith(ITEMS[0].children);
+  });
+});

package/src/layout/Menu/_hooks/useOnlyLvOneMenu.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 import { useLocation } from "react-router";
 import { MenuType } from "..";
 
@@ -21,6 +22,11 @@ export const useOnlyLvOneMenu = ({
   setMenuKey,
 }: UseOnlyLvOneMenuOptions) => {
   const location = useLocation();
+  // getCurrChildItems 是 effect 体里发出去的通知，本身进依赖数组是这一类死循环的标准配方：
+  // 消费方传内联箭头 → 每次渲染新引用 → effect 重跑 → setOpenkeys([item.key]) 每次都是
+  // 新数组必定触发重渲染 → 又是新引用 …… 直到 React 抛 Maximum update depth exceeded。
+  // 通知取 ref 里的最新引用，依赖数组只留真正的输入。
+  const getCurrChildItemsRef = useLatestRef(getCurrChildItems);
 
   useEffect(() => {
     if (onlyLvOneMenu) {
@@ -28,14 +34,14 @@ export const useOnlyLvOneMenu = ({
         (i) => i.key === "/" + location.pathname.split("/").filter(Boolean)[0]
       );
       if (item) {
-        getCurrChildItems?.(item.children || []);
+        getCurrChildItemsRef.current?.(item.children || []);
         setOpenkeys([item.key]);
         setMenuKey(item.key);
       }
     }
   }, [
     items,
-    getCurrChildItems,
+    getCurrChildItemsRef,
     location,
     onlyLvOneMenu,
     setOpenkeys,