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，得到防抖后的值，然后用这个值来处理其他逻辑，完成防抖的效果。