@hsu-react/ui 2.5.3 → 2.5.5

package/src/components/Chart/callbacks.test.tsx

@@ -0,0 +1,315 @@
+import React, { useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+
+/**
+ * 这一组用例盯的是同一条缺陷：**回调 prop 进 effect 依赖数组**。
+ *
+ * 消费方写内联箭头（`onXxx={(v) => setV(v)}`）时每次渲染都是新引用，
+ * 回调进依赖数组 → effect 重跑 → 重新 setOption / 重新注册监听 / 再发一次通知，
+ * 通知里再 setState 就是死循环。
+ *
+ * 但这些回调同时还被当作「要不要注册这个监听」的真值判断，
+ * 所以修法不能是「把回调从依赖数组里删掉」了事——
+ * 「从无到有传入回调」必须仍然能正确注册，这里每个组件都单独验一条。
+ */
+
+type Handler = (params: unknown) => void;
+
+const chart = {
+  setOption: vi.fn(),
+  resize: vi.fn(),
+  dispose: vi.fn(),
+  getDataURL: vi.fn(() => "data:image/png;base64,AAAA"),
+  getOption: vi.fn(() => ({ dataZoom: [{ start: 0, end: 100 }] })),
+  on: vi.fn(),
+  off: vi.fn(),
+};
+const handlers = new Map<string, Set<Handler>>();
+
+chart.on.mockImplementation(((event: string, handler: Handler) => {
+  if (!handlers.has(event)) handlers.set(event, new Set());
+  handlers.get(event)!.add(handler);
+}) as never);
+chart.off.mockImplementation(((event: string, handler?: Handler) => {
+  if (!handler) handlers.delete(event);
+  else handlers.get(event)?.delete(handler);
+}) as never);
+
+const emit = (event: string, params?: unknown) => {
+  act(() => {
+    handlers.get(event)?.forEach((h) => h(params));
+  });
+};
+const listenerCount = (event: string) => handlers.get(event)?.size ?? 0;
+
+vi.mock("echarts", () => ({
+  init: () => chart,
+  use: () => {},
+  registerTheme: () => {},
+  graphic: {},
+}));
+vi.mock("echarts-gl", () => ({}));
+
+import ChartBar from "./Bar";
+import ChartLine from "./Line";
+import ChartSankey from "./Sankey";
+import ChartTree from "./Tree";
+import ChartPie from "./Pie";
+
+// 容器必须量得到尺寸，否则 useContainerReady 不放行 echarts.init
+beforeEach(() => {
+  handlers.clear();
+  vi.clearAllMocks();
+  chart.getOption.mockImplementation(() => ({
+    dataZoom: [{ start: 0, end: 100 }],
+  }));
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+    width: 600,
+    height: 400,
+    top: 0,
+    left: 0,
+    right: 600,
+    bottom: 400,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect);
+});
+
+const X_AXIS = ["一", "二", "三", "四"];
+const SERIES = [{ name: "A", value: [1, 2, 3, 4] }];
+const SANKEY_NODES = [{ name: "a" }, { name: "b" }];
+const SANKEY_LINKS = [{ source: "a", target: "b" }];
+const TREE_DATA = [{ name: "root", value: 1, children: [] }];
+const PIE_DATA = [{ name: "a", value: 1 }];
+
+describe("Chart.Bar / Chart.Line 的回调 prop", () => {
+  const cases = [
+    ["Chart.Bar", ChartBar],
+    ["Chart.Line", ChartLine],
+  ] as const;
+
+  for (const [name, Comp] of cases) {
+    describe(name, () => {
+      it("内联 onDataZoomWindowChanged 写回 state 不会死循环，窗口没变也不重复通知", () => {
+        const spy = vi.fn();
+
+        function Consumer() {
+          const [, setWin] = useState<unknown>(null);
+
+          return (
+            <Comp
+              xAxisData={X_AXIS}
+              seriesData={SERIES}
+              // 内联箭头：每次渲染都是新引用
+              onDataZoomWindowChanged={(w) => {
+                spy(w);
+                setWin(w);
+              }}
+            />
+          );
+        }
+
+        render(<Consumer />);
+
+        // 初次同步一次窗口；进了循环这里会是几十上百次
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith({ startIndex: 0, endIndex: 3 });
+      });
+
+      it("onClick 换引用不重复注册监听，且调到的是最新的那个", () => {
+        const first = vi.fn();
+        const second = vi.fn();
+
+        const { rerender } = render(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} onClick={first} />,
+        );
+        expect(listenerCount("click")).toBe(1);
+
+        rerender(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} onClick={second} />,
+        );
+        // 换引用不该拆装监听，更不该重新 setOption
+        expect(listenerCount("click")).toBe(1);
+
+        emit("click", { name: "x" });
+        expect(first).not.toHaveBeenCalled();
+        expect(second).toHaveBeenCalledTimes(1);
+      });
+
+      it("onLegendSelectChanged 从无到有传入时仍会注册", () => {
+        const { rerender } = render(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} />,
+        );
+        // 没传就不注册
+        expect(listenerCount("legendselectchanged")).toBe(0);
+
+        const spy = vi.fn();
+        rerender(
+          <Comp
+            xAxisData={X_AXIS}
+            seriesData={SERIES}
+            onLegendSelectChanged={spy}
+          />,
+        );
+        expect(listenerCount("legendselectchanged")).toBe(1);
+
+        emit("legendselectchanged", { selected: { A: false } });
+        expect(spy).toHaveBeenCalledWith({ A: false });
+      });
+
+      it("onDataZoomWindowChanged 从无到有传入时仍会注册并同步一次窗口", () => {
+        const { rerender } = render(
+          <Comp xAxisData={X_AXIS} seriesData={SERIES} />,
+        );
+        expect(listenerCount("datazoom")).toBe(0);
+
+        const spy = vi.fn();
+        rerender(
+          <Comp
+            xAxisData={X_AXIS}
+            seriesData={SERIES}
+            onDataZoomWindowChanged={spy}
+          />,
+        );
+        expect(listenerCount("datazoom")).toBe(1);
+        expect(spy).toHaveBeenCalledWith({ startIndex: 0, endIndex: 3 });
+
+        spy.mockClear();
+        emit("datazoom", { start: 25, end: 100 });
+        expect(spy).toHaveBeenCalledWith({ startIndex: 1, endIndex: 3 });
+      });
+
+      it("传回调后又撤掉时监听会摘干净", () => {
+        const { rerender } = render(
+          <Comp
+            xAxisData={X_AXIS}
+            seriesData={SERIES}
+            onLegendSelectChanged={() => {}}
+          />,
+        );
+        expect(listenerCount("legendselectchanged")).toBe(1);
+
+        rerender(<Comp xAxisData={X_AXIS} seriesData={SERIES} />);
+        expect(listenerCount("legendselectchanged")).toBe(0);
+      });
+    });
+  }
+});
+
+describe("Chart.Sankey / Chart.Tree 的 getImage", () => {
+  it("Sankey：getImage 换引用不重新 setOption，出图时调到的是最新的那个", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { rerender } = render(
+      <ChartSankey
+        seriesData={SANKEY_NODES}
+        seriesLinks={SANKEY_LINKS}
+        getImage={first}
+      />,
+    );
+    const before = chart.setOption.mock.calls.length;
+
+    rerender(
+      <ChartSankey
+        seriesData={SANKEY_NODES}
+        seriesLinks={SANKEY_LINKS}
+        getImage={second}
+      />,
+    );
+    // 出图回调不是画图的输入，换引用不该让图重画
+    expect(chart.setOption.mock.calls.length).toBe(before);
+
+    emit("finished");
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it("Sankey：内联 getImage 把图存进 state 不会死循环", () => {
+    const spy = vi.fn();
+
+    function Consumer() {
+      const [, setImg] = useState("");
+
+      return (
+        <ChartSankey
+          seriesData={SANKEY_NODES}
+          seriesLinks={SANKEY_LINKS}
+          getImage={(img) => {
+            spy(img);
+            setImg(img);
+          }}
+        />
+      );
+    }
+
+    render(<Consumer />);
+    emit("finished");
+    emit("finished");
+
+    // finished 触发几次就回调几次，不会自激放大
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it("Tree：getImage 换引用不重新 setOption，出图时调到的是最新的那个", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { rerender } = render(
+      <ChartTree seriesData={TREE_DATA} getImage={first} />,
+    );
+    const before = chart.setOption.mock.calls.length;
+
+    rerender(<ChartTree seriesData={TREE_DATA} getImage={second} />);
+    expect(chart.setOption.mock.calls.length).toBe(before);
+
+    emit("finished");
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it("Tree：从无到有传入 getImage 时仍能拿到图", () => {
+    const spy = vi.fn();
+    const { rerender } = render(<ChartTree seriesData={TREE_DATA} />);
+
+    emit("finished");
+    expect(spy).not.toHaveBeenCalled();
+
+    rerender(<ChartTree seriesData={TREE_DATA} getImage={spy} />);
+    emit("finished");
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Chart.Pie 的 onClick", () => {
+  it("换引用不重复注册，且调到最新引用", () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    const { rerender } = render(
+      <ChartPie seriesData={PIE_DATA} onClick={first} />,
+    );
+    expect(listenerCount("click")).toBe(1);
+
+    rerender(<ChartPie seriesData={PIE_DATA} onClick={second} />);
+    expect(listenerCount("click")).toBe(1);
+
+    emit("click", { name: "a" });
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it("从无到有传入 onClick 时仍会注册", () => {
+    const spy = vi.fn();
+    const { rerender } = render(<ChartPie seriesData={PIE_DATA} />);
+    expect(listenerCount("click")).toBe(0);
+
+    rerender(<ChartPie seriesData={PIE_DATA} onClick={spy} />);
+    expect(listenerCount("click")).toBe(1);
+
+    emit("click", { name: "a" });
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Chat/ChatInput/index.tsx

@@ -14,6 +14,7 @@ import {
 } from "./_components";
 import classNames from "classnames";
 import Button, { ButtonProps } from "../../Button";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 export type { AgentToggleConfig } from "./_components";
 
 export interface AgentConfig {
@@ -127,6 +128,10 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
   // Use external state or internal state
   const agentsState = isControlled ? externalAgentsState : internalAgentsState;
 
+  const onAgentsChangeRef = useLatestRef(onAgentsChange);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   // When the model switches, sync the agents state (only in uncontrolled mode)
   useEffect(() => {
     if (isControlled) return; // In controlled mode, state is managed externally
@@ -136,12 +141,12 @@ const ChatInput: React.FC<ChatInputProps> = (props) => {
     );
     if (currentModel?.agents && currentModel.agents.length > 0) {
       setInternalAgentsState(currentModel.agents);
-      onAgentsChange?.(currentModel.agents);
+      onAgentsChangeRef.current?.(currentModel.agents);
     }
   }, [
     modelConfig?.modelType,
     modelConfig?.modelList,
-    onAgentsChange,
+    onAgentsChangeRef,
     isControlled,
   ]);
 

package/src/components/Icon/index.tsx

@@ -8,6 +8,7 @@ import * as AntdIcons from "@ant-design/icons";
 import React, { useCallback, useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../hooks/useLatestRef";
 
 type AntdNamedIconComponent = React.ForwardRefExoticComponent<
   {
@@ -73,9 +74,13 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, forwardedRef)
     [forwardedRef]
   );
 
+  const onRefRef = useLatestRef(onRef);
+
+  // 回调 prop 不进依赖数组：消费方传内联箭头时每次渲染都是新引用，effect 会跟着
+  // 重跑并再调一次回调 —— 回调里 setState 就是死循环（详见 Input/TextArea 的说明）
   useEffect(() => {
-    onRef?.(ref);
-  }, [onRef, ref]);
+    onRefRef.current?.(ref);
+  }, [onRefRef, ref]);
 
   const mergedStyle: React.CSSProperties = {
     color,

package/src/components/Input/Number/index.tsx

@@ -8,8 +8,8 @@ import { CloseCircleFilled } from "@ant-design/icons";
 
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import { useDebounceEffect } from "ahooks";
 import type { InputNumberRef } from "../../../types/antd";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface InputNumberProps extends Omit<
   AntdInputNumberProps,
@@ -44,6 +44,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
   // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   const ref = useRef<InputNumberRef>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const getRefRef = useLatestRef(getRef);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -58,22 +59,21 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的文本，代替原来那个用 state 记账的写法
+  const notifiedRef = useRef<string>(initialValue);
 
-  useDebounceEffect(
-    () => {
-      if (_value !== lastValue) {
-        setLastValue(_value);
-
-        onChange?.(_value);
-      }
-    },
-    [_value, lastValue, onChange],
-    {
-      wait: 10,
-    },
-  );
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    onChange?.(next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
@@ -96,17 +96,18 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         Number(value) === Number(_value);
 
       if (sameNumber) {
-        // 只同步「已提交值」，不动正在编辑的文本
-        setLastValue(_value);
+        // 只同步「已通知过的值」，不动正在编辑的文本
+        notifiedRef.current = _value;
       } else if (value !== undefined && value !== null) {
         const newValue =
           typeof value === "number" ? `${value}` : value?.toString();
+        // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+        notifiedRef.current = newValue;
         setValue(newValue);
-        setLastValue(newValue);
       } else {
         // Clear only on initialization or when explicitly set to undefined/null externally
+        notifiedRef.current = "";
         setValue("");
-        setLastValue("");
       }
     }
     // `_value` 是刻意不进依赖的：这个 effect 只该在**外部** value 变化时跑，
@@ -114,15 +115,15 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   const handleClear = (e: React.MouseEvent) => {
     e.stopPropagation();
     setValue("");
-    setLastValue("");
-    onChange?.("");
+    notify("");
   };
 
   const showClear =
@@ -138,6 +139,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
             ? ""
             : (typeof e === "number" ? e : e || "").toString();
         setValue(newValue);
+        notify(newValue);
       }}
       className={classNames(styles.antdInput, className)}
       controls={false}

package/src/components/Input/Password/index.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { InputRef } from "antd/es/input";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface PasswordProps
   extends Omit<
@@ -19,8 +20,11 @@ export interface PasswordProps
 const Password: React.FC<PasswordProps> = (props) => {
   const { onChange, getRef, value, defaultValue, className, ...inputConfig } =
     props;
-  const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
+  const getRefRef = useLatestRef(getRef);
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只决定「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = useRef(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -31,51 +35,58 @@ const Password: React.FC<PasswordProps> = (props) => {
       : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = useRef<string>(initialValue);
 
-  useEffect(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [_value, isComposing, lastValue, onChange]);
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空
+    onChange?.(next.trim() === "" ? "" : next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? (value?.toString() ?? "") : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   return (
     <AntdPassword
       className={classNames(styles.antdInput, className)}
       ref={ref}
-      onCompositionStart={() => setComposing(true)}
-      onCompositionEnd={() => {
-        setTimeout(() => {
-          setComposing(false);
-        }, 1);
+      onCompositionStart={() => {
+        composingRef.current = true;
+      }}
+      onCompositionEnd={(e) => {
+        composingRef.current = false;
+        // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+        // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+        notify(e.currentTarget.value);
       }}
       value={_value}
       onChange={(e) => {
-        setValue(e.target.value);
+        const next = e.target.value;
+        setValue(next);
+        if (!composingRef.current) notify(next);
       }}
       {...inputConfig}
     />

package/src/components/Input/Search/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import AntdSearch from "antd/es/input/Search";
 import classNames from "classnames";
 import styles from "./index.module.scss";
+import { useLatestRef } from "../../../hooks/useLatestRef";
 
 export interface SearchProps
   extends Omit<
@@ -17,8 +18,11 @@ export interface SearchProps
 const Search: React.FC<SearchProps> = (props) => {
   const { onChange, getRef, value, defaultValue, className, ...inputConfig } =
     props;
-  const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
+  const getRefRef = useLatestRef(getRef);
+  // 输入法组字期间不往外通知。放 ref 不放 state：它只决定「要不要发通知」，
+  // 不参与渲染，而且必须在同一次事件里立刻生效
+  const composingRef = useRef(false);
 
   // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
@@ -29,50 +33,59 @@ const Search: React.FC<SearchProps> = (props) => {
       : "";
 
   const [_value, setValue] = useState<string>(initialValue);
-  const [lastValue, setLastValue] = useState<string>(initialValue);
   const prevValueRef = useRef<typeof value>(undefined);
+  // 最近一次通知出去的原文。只用来去掉 compositionend 与 input 两个事件的重复通知
+  const notifiedRef = useRef<string>(initialValue);
 
-  useEffect(() => {
-    if (!isComposing && _value !== lastValue) {
-      const trimmedValue = _value.trim();
-      const finalValue = trimmedValue === "" ? "" : _value;
-      setLastValue(finalValue);
-      onChange?.(finalValue);
-    }
-  }, [_value, isComposing, lastValue, onChange]);
+  /**
+   * `onChange` 是「用户改了输入」这个**事件**的通知，不是从 state 推导出来的结果，
+   * 所以在事件处理里发，不在 effect 里发。详见 `TextArea/index.tsx` 里那段说明——
+   * 旧写法（依赖数组里放 `onChange`、体内又调它、用 state 记「通知过没有」）
+   * 会让传内联箭头的消费方死循环。
+   */
+  const notify = (next: string) => {
+    if (next === notifiedRef.current) return;
+    notifiedRef.current = next;
+    // 全是空白等同于空
+    onChange?.(next.trim() === "" ? "" : next);
+  };
 
   useEffect(() => {
     // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
-      if (value !== undefined) {
-        setValue(value?.toString());
-        setLastValue(value?.toString());
-      } else {
-        // Clear only on initialization or when explicitly set to undefined externally
-        setValue("");
-        setLastValue("");
-      }
+      // 外部把值改了，之前通知过什么就不作数了，重新以外部值为准
+      const next = value !== undefined ? (value?.toString() ?? "") : "";
+      notifiedRef.current = next;
+      setValue(next);
     }
   }, [value]);
 
+  // 只在挂载时把 ref 交出去。`getRef` 进依赖数组同样会被内联箭头带着每次渲染重跑
   useEffect(() => {
-    getRef?.(ref.current);
-  }, [getRef]);
+    getRefRef.current?.(ref.current);
+  }, [getRefRef]);
 
   return (
     <AntdSearch
       ref={ref}
       className={classNames(styles.antdInput, className)}
-      onCompositionStart={() => setComposing(true)}
-      onCompositionEnd={() => {
-        setTimeout(() => {
-          setComposing(false);
-        }, 1);
+      onCompositionStart={() => {
+        composingRef.current = true;
+      }}
+      onCompositionEnd={(e) => {
+        composingRef.current = false;
+        // 组完字的那一下自己发通知。浏览器之间 compositionend 与 input 的先后
+        // 不一致，`notify` 里按原文去重，两种顺序都只会发出一次
+        notify(e.currentTarget.value);
       }}
       value={_value}
-      onChange={(e) => setValue(e.target.value)}
+      onChange={(e) => {
+        const next = e.target.value;
+        setValue(next);
+        if (!composingRef.current) notify(next);
+      }}
       {...inputConfig}
     />
   );