ht_hooks/es/useDebounce/index.js

ht React 业务 Hooks

import { __read } from "tslib";
import { useEffect, useState } from 'react';
import useDebounceFn from '../useDebounceFn';
function useDebounce(value, options) {
  var _a = __read(useState(value), 2),
    debounced = _a[0],
    setDebounced = _a[1];
  var run = useDebounceFn(function () {
    setDebounced(value);
  }, options).run;
  useEffect(function () {
    run();
  }, [value]);
  return debounced;
}
export default useDebounce;
//!课上
var useDebounce2 = function (value, delay) {
  if (delay === void 0) {
    delay = 500;
  }
  var _a = __read(useState(value), 2),
    debounceValue = _a[0],
    setDebouncedValue = _a[1];
  useEffect(function () {
    var timer = setTimeout(function () {
      setDebouncedValue(value);
    }, delay);
    return function () {
      clearTimeout(timer);
    };
  }, [value, delay] //#value变化时，执行上一次return（清除定时器）和这次内容（开启新定时器）
  );
  return debounceValue; //#定时器触发 setState，会导致组件重新渲染，useDebounce2 会再次执行，返回最新的 debouncedValue
};