实现 useThrottle 自定义钩子

防抖只需在每次事件发生时重置计时器。节流则必须主动跟踪上次执行的时间，并判断是否已经经过足够长的时间以再次执行。这需要在多次渲染之间保存时间戳，因此实现起来比防抖稍微复杂一些。

上次执行的时间戳必须在多次渲染之间持久保存，同时不能自行触发重新渲染，因此 useRef 是合适的工具。请将时间戳存储为 const lastRunTime = useRef(Date.now())。与状态不同，更新引用不会触发重新渲染，因此节流逻辑可以高效运行，不会产生额外的渲染周期。

useThrottle(value, delay) 钩子会返回输入值经过节流处理的版本。它的接口约定与 useDebounce 类似：接受任意值和以毫秒为单位的延迟，并返回经过节流处理的值。组件可以用相同方式使用它，因此它是适用于不同计时语义的直接替代方案。

后沿节流会在每个时间间隔结束时更新值。当新值到达时，请为剩余的时间间隔安排一个 setTimeout：delay - (Date.now() - lastRunTime.current)。计时器触发时，更新状态并记录新的 lastRunTime。在清理过程中取消之前的计时器。

前沿节流会立即应用第一个值，并在时间间隔到期前忽略后续值。请检查：如果 Date.now() - lastRunTime.current >= delay，就更新状态并记录时间；否则跳过更新。这样首次操作会立即得到反馈，随后进入冷却期。

最佳用户体验通常会结合两者：立即响应第一个事件（前沿），然后确保时间间隔结束后也应用最终状态（后沿）。这意味着用户会先看到快速响应，并且在移动停止后始终应用最终稳定值，从而避免结束状态过时。

请将待处理的计时器 ID 存储在 useRef 中：const timeoutRef = useRef(null)。安排新计时器之前，请调用 clearTimeout(timeoutRef.current)，以取消任何已有的计时器。这样可以防止多个计时器相互重叠，否则它们会在单个节流时间间隔内触发多次更新。

组件卸载时，useEffect 的清理函数应调用 clearTimeout(timeoutRef.current)，以取消任何待处理的后沿更新。否则，待处理的计时器会在组件卸载后触发，尝试更新已卸载组件的状态，并可能导致 React 警告。

您可以创建基于 useCallback 的节流钩子，而不是使用基于值的钩子：useThrottledCallback(fn, delay) 会返回一个经过节流处理的函数。这种方式在需要节流的是函数调用（例如分析数据跟踪器）而不是响应式值时更加灵活。

在 Jest 测试中，请使用 jest.useFakeTimers() 来控制时间。设置延迟为 1000 毫秒的节流，快速触发 10 次值变更，然后将模拟时间推进 500 毫秒，并检查是否只发生了 1 或 2 次更新。再推进 500 毫秒，验证后沿更新是否触发。这样可以确定性地验证节流行为。

React 会在渲染期间批量处理状态更新。在此模型中，对状态更新执行节流可以顺利工作。不过请注意，在 React 18 并发模式下，渲染可能会被中断。节流逻辑本身基于 Date.now() 获取的实际时钟时间，因此不受 React 调度影响。

“后沿”节流会在哪个边沿触发？

节流需要使用 useRef 跟踪上次执行时间。该钩子可以实现前沿（立即执行）、后沿（延迟执行）或两者兼具的行为。请始终将计时器 ID 存储在引用中，并在清理时取消它。在基于函数的使用场景中，优先采用 useThrottledCallback 模式。使用模拟计时器进行测试，以确保可靠性。