为什么在使用 useCallback 时使用 'ref' 而不是直接使用 useCallback

Question

我正在研究 React 项目，并且正在研究一些库。我发现他们使用的“useCallback”与我使用的不同。下面是代码部分。我仍然认为这段代码与直接使用“useCallback”没有什么区别

// Saves incoming handler to the ref in order to avoid "useCallback hell"
export function useEventCallback<T, K>(handler?: (value: T, event: K) => void): (value: T, event: K) => void {
  const callbackRef = useRef(handler);

  useEffect(() => {
    callbackRef.current = handler;
  });

  return useCallback((value: T, event: K) => callbackRef.current && callbackRef.current(value, event), []);
}

所以我的问题是“useCallback hell”是什么意思？这样使用“useCallback”有什么好处？

// 顺便说一句：我在 React 文档中找到了类似的示例。但我仍然无法理解 https://en.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

Answer 1

当您执行普通操作时useCallback，您必须传入一个包含函数使用的变量的依赖项数组。当其中之一发生变化时，记忆就会中断。这在很多情况下都很好，但有时你的记忆总是会被破坏（因为你依赖于不断变化的值）。当这种情况发生时，useCallback几乎没有任何好处。

您所显示的代码的目标是记忆化永远不会中断，即使您有复杂的依赖关系。请注意，当它调用时useCallback，它会传入一个空的依赖项数组[]。与使用 ref 相结合，可以跟踪最新内容handler。然后，当最终调用该函数时，它将检查最新的引用handler并调用它。最新的handler在其闭包中具有最新的值，因此它的行为符合预期。

这段代码确实实现了永不破坏记忆的目标。然而，它需要小心使用。如果你使用react的并发渲染，并且在渲染过程中调用返回的函数useEventCallback，你可能会得到一些意想不到的结果。只有在渲染之外调用该函数才是安全的，例如在事件回调中，这就是他们将其命名为useEventCallback.