实现 useDebounce 自定义钩子

useDebounce 钩子接受一个值和一个以毫秒为单位的延迟，并返回该值经过防抖处理的版本：function useDebounce(value, delay)。返回的 debouncedValue 会滞后于实际值，只有在指定延迟时间内没有再次发生变化时才会更新。

在钩子内部，请声明一个状态变量：const [debouncedValue, setDebouncedValue] = useState(value)。该状态保存最近一次提交的值。它起始时等于初始值，只有防抖计时器触发后才会更新。读取 debouncedValue 的组件会获得稳定且已确定的输入值。

核心逻辑位于 useEffect 中：使用 setTimeout(() => setDebouncedValue(value), delay) 创建计时器并保存其 ID。该副作用会在 value 或 delay 每次变化时运行。计时器会在最后一次变化后的 delay 毫秒触发，并更新防抖状态。

useEffect 的清理函数会调用 clearTimeout(timerId)。当计时器触发前 value 发生变化时，框架会运行清理函数，取消待处理的更新，然后重新安排一个计时器。这正是防抖生效的关键机制：快速变化会不断重置计时器。

useEffect 的依赖数组应包含 [value, delay]。当输入值发生变化时，副作用会重新运行，因此会安排新的计时器；当 delay 发生变化时，副作用也会重新运行，以应对调用方动态调整防抖间隔的情况。必须同时包含这两项，以避免闭包中的值过时。

使用方式很简单：const debouncedSearch = useDebounce(searchInput, 300)。另一个以 [debouncedSearch] 为依赖项的 useEffect 会触发接口调用。输入状态（searchInput）会立即更新，使输入保持响应；只有接口调用会等待防抖完成。

默认情况下，标准实现只在后沿执行。对于“立即”模式，也就是在首次触发时调用函数、但对后续调用进行防抖，您需要使用引用来跟踪调用是否已经发生，并在超时后重置该状态。这种实现更复杂，但对提交按钮很有用。

为了确保类型安全，请将钩子设为泛型：function useDebounce(value: T, delay: number): T。这样，TypeScript 就可以根据 value 的类型推断 debouncedValue 的类型。泛型参数 T 会自动传递到内部状态和返回类型中。

一个常见错误是忘记从 useEffect 返回清理函数。没有清理时，每次值发生变化都会创建一个新计时器，却永远不会取消旧计时器。结果是多个计时器都会触发，导致 setDebouncedValue 使用过时的值被多次调用，从而完全失去防抖效果。

另一种方法是使用工具库，将防抖函数本身存储在 useRef 中。与基于状态的方法不同，基于引用的方法对回调函数进行防抖，而不是对值进行防抖。当您需要获得派生值时，请使用基于状态的钩子；当您需要对事件处理函数进行防抖时，请使用回调方法。

请在计时器回调中添加控制台日志，并在快速输入时观察浏览器控制台，以验证钩子是否正常工作。您应该每次看到一个“停止”事件对应的日志，而不是每次按键对应一条日志。快速输入期间，日志数量应远少于按键次数。

为什么 useDebounce 中的 useEffect 需要返回一个调用 clearTimeout 的清理函数？

useDebounce(value, delay) 钩子会保存一个防抖状态，只有在静默 delay 毫秒后才更新。它的 useEffect 会设置超时，并在清理时将其清除，以取消过时的计时器。请将防抖值用作获取接口数据的副作用的依赖项。添加 TypeScript 泛型，以实现完整的类型安全。