BFE.devAI解答 - React 代码题
8. useDebounce()

需要实现一个自定义的Hooks useDebounce()，用于对频繁更改的值进行防抖。

防抖就是在指定时间内，如果有多个连续的事件，只会执行一次。例如，在文本输入框中输入时，用户可能会连续敲击键盘，但应该只有输入完成后一段时间内最后一次输入才被提交处理。

代码实现如下：

import { useState, useEffect } from 'react'

function useDebounce(value: any, delay: number) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

function App() {
  const [value, setValue] = useState(...)

  // 防抖后的值将在1秒后更新
  const debouncedValue = useDebounce(value, 1000)

  // 使用debouncedValue来处理其他逻辑
  // ...

  return ...
}

在 useDebounce() 中，我们使用了 useState() 来保存防抖后的值 debouncedValue。当value改变时，会启动一个 setTimeout() 定时器，在 delay 毫秒后执行更新 debouncedValue 的操作。返回 debouncedValue 用于在其他逻辑中使用。

在组件中，我们可以直接使用自定义的Hooks，得到防抖后的值，然后用这个值来处理其他逻辑，完成防抖的效果。