使用debounce时解释useCallback

Question

像这样只调用去抖功能时：

const handler = debounce(someFunction, 2000);

它会在每次击键时调用 someFunction。但是当我们把它包装在useCallback中时，它工作正常。

const handler = useCallback(debounce(someFunction, 2000), []);

但据我所知，去抖动函数应该在 2000 毫秒后调用 someFunction，因此不应在每次击键时调用该函数。但这不是我所期望的。

谁能解释一下为什么使用 debounce 时需要 useCallback？

Answer 1

这取决于handler定义的范围。

如果handler定义在组件的外部作用域中，它将完全相同：

// Defined only once on file read
const handler = debounce(someFunction, 2000);

const Component = () => {
  return <button onClick={handler}>Run</button>;
};

但是，如果它在内部范围内定义，它实际上会在每个渲染上重新定义函数，因此您需要在每个渲染上重置去抖动。

这就是为什么在每次击键时都没有应用去抖动（它在每次渲染时都会重置，给人一种不起作用的感觉）。

// Defined on every render
const Component = () => {
  const handler = debounce(someFunction, 2000);
  return <button onClick={handler}>Run</button>;
};

用 useCallback 包装函数来修复这个问题。

使用debounce时解释useCallback

explain useCallback when using debounce

lodash

reactjs

debounce