返回课程

自定义 Hook

编程代码 · React/Next.js

💡 自定义 Hook:封装防抖逻辑,延迟更新值减少频繁计算
function useDebounce<T>(value: T, delay: number): T {// 定义泛型 Hook,接收值和延迟毫秒数
  const [debounced, setDebounced] = useState(value);// 内部状态保存防抖后的值
  useEffect(() => {// useEffect 监听值变化
    const timer = setTimeout(() => setDebounced(value), delay);// 设置定时器:延迟后才更新防抖值
    return () => clearTimeout(timer);// 清理函数:值变化时取消上一个定时器
  }, [value, delay]);// 依赖数组:值或延迟变化时重新执行
  return debounced;// 返回防抖后的值
}// Hook 定义结束
0 字/分0% 准确
🐵
f左手食指
ESC 暂停 退格