使用 debounce 时解释 useCallback

Question

当像这样调用 debounce 函数时：

const handler = debounce(someFunction, 2000);

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

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

但据我所知， debounce 函数应该someFunction在 2000 ms 之后调用，因此不应在每次击键时调用该函数。但这不是我所期望的。

谁能解释为什么在使用 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>;
};

但是，如果它是在内部作用域中定义的，它实际上会在每个 render 上重新定义该函数，因此您可以在每个 render 上重置去抖。

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

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

将函数包装起来useCallback就可以解决这个问题。