使用借方时解释useCallback

Question

当只调用下面这样的When函数时：

const handler = debounce(someFunction, 2000);

它将在每次击键时调用someFunction。但是当我们把它包装在useCallback中时，它工作得很好。

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

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

有谁能解释一下为什么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包装函数正好修复了这个问题。