使用反应挂钩去抖动或节流答案

【问题标题】：Debounce or throttle with react hook使用反应挂钩去抖动或节流
【发布时间】：2021-08-19 22:01:58
【问题描述】：

当来自输入字段的搜索查询参数发生更改时，我需要发出 api 请求，但前提是该字段不为空。

我正在测试这个网站上找到的几个答案，但无法让它们工作

首先是this 一个带有自定义挂钩的

export function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

现在在我的组件中我这样做

const debouncedTest = useDebounce(() => {console.log("something")}, 1000);

但这似乎在每次重新渲染时都会被调用，而不管任何参数，我需要能够在 useEffect 中调用它，就像这样

useEffect(() => {
  if (query) {      
    useDebounce(() => {console.log("something")}, 1000);
  } else {
    //...
  }
}, [query]);

这当然行不通

使用 lodash 的另一种方法

const throttledTest = useRef(throttle(() => {
  console.log("test");   
}, 1000, {leading: false}))

但是我如何从上面的 useEffect 触发呢？我不明白如何进行这项工作

谢谢

【问题讨论】：

你能解释一下你想从这个去抖动中得到什么吗？ api调用太快或按钮被点击太多次？有什么问题。首先确保您有一个带有debounce 的工作代码。这样我们可以帮助你添加它。

标签： reactjs react-hooks throttling

【解决方案1】：

你的钩子的签名和你调用它的时候不一样。

也许你应该按照这些思路做点什么：

const [state, setState] = useState(''); // name it whatever makes sense
const debouncedState = useDebounce(state, 1000);

useEffect(() => {
  if (debouncedState) functionCall(debouncedState);
}, [debouncedState])

【讨论】：

【解决方案2】：

我可以在这里快速指出一两件事。

useEffect(() => {
  if (query) {      
    useDebounce(() => {console.log("something")}, 1000);
  } else {
    //...
  }
}, [query]);

从技术上讲，您不能执行上述操作，useEffect 不能嵌套。

通常debounce 与钩子没有任何关系。因为它是一个普通的函数。所以你应该首先寻找一个可靠的去抖，创建一个或使用lodash.debounce。然后构建您的代码以调用debounce(fn)。 Fn 是您要延迟的原始函数。

另外，debounce 将处理经常变化的情况，这就是为什么你要应用去抖动来降低频率。因此，在useEffect 中看到它是相对少见的。

  const debounced = debounce(fn, ...)
  const App = () => {
    const onClick = () => { debounced() }
    return <button onClick={onClick} />
  }

还有一个常见的问题，人们可能会在App 中使用去抖动功能。这也不正确，因为App 每次渲染时都会触发。

我可以稍后提供一个相对更详细的解决方案。如果你也能解释你想做什么，这会有所帮助。

【讨论】：