reactjs - 为什么在使用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 的 ref 并调用它。最新的 handler 在其闭包中具有最新的值，因此它的行为符合预期。

此代码确实实现了永不中断记忆化的目标。但是，需要谨慎使用。如果你使用的是react的并发渲染，在渲染过程中调用了useEventCallback返回的函数，可能会得到一些意想不到的结果。只有在渲染之外调用该函数才是安全的，例如在事件回调中，这就是他们将其命名为 useEventCallback 的原因。