hooks useDebounce写法

// 闭包保留了timeout的状态
const debounce = (fn, delay) => {
  let timeout
  return (...param) => {
    if (timeout) {
      clearTimeout(timeout)
    }
    // 返回的函数里用到了外部的变量，保存了该变量的状态
    timeout = setTimeout(() => {
      fn(...param)
    }, delay)
  }
}

react 的 useDebounce

• 返回一个debounceValue，这个值会在delay后改变，这样用到它的地方的依赖，也会有这样的效果
• param变了，debouncedParam 不会立即改变，这样就达到了防抖的效果
• useEffect里的函数每次执行之前，都会清除掉上一次的effect，即执行上一次effect里return的函数

// 返回一个debounceValue，这个值会在delay后改变，这样用到它的地方的依赖，也会有这样的效果
export const useDebounce = (value, delay) => {
  const [debounceValue, setDebounceValue] = useState(value)

  useEffect(() => {
    const timeout = setTimeout(() => setDebounceValue(value), delay)
    return () => {
      clearTimeout(timeout)
    }
  }, [value, delay])

  return debounceValue
}

// 组件里使用:
// param变了，debouncedParam 不会立即改变，这样就达到了防抖的效果
 const [param, setParam] = useState({
    name: '',
    personId: ''
  })
  const debouncedParam = useDebounce(param,1000)
  useEffect(() => {
    fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debouncedParam))}`).then(async (res) => {
      if (res.ok) {
        setList(await res.json())
      }
    })
  }, [debouncedParam])