reactjs - useCallback 和 useMemo react hook 的缓存大小是多少，为什么？

Question

我正在查看 React 源代码，特别是useCallback实现。据我了解，缓存大小useCallback为 1。在mountCallback我们初始化hook.memoizedState一个数组，其中第一个元素是callback- 的第一个参数useCallback。如果updateCallback依赖项没有改变，那么我们返回hook.memoizedState数组的第一个元素。因为callback' 的引用没有改变，所以不会重新渲染。反之，如果依赖关系发生变化，我们将hook.memoizedState数组的第一个元素设置为then引用的callback参数，就会发生变化（因为函数对象的参数总是有一个新值），从而触发重新渲染。updateCallbackcallback

所以缓存useCallback是基于callback的引用。我的理解正确吗？

function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

Answer 1

它缓存callback自身以及您作为第二个参数传递的依赖值。在任何时间点，它都拥有一个 callback引用和一个依赖值数组。

它需要依赖值来检查它是否应该创建一个新的回调引用。