javascript - 为什么 React 的 useCallback 没有使用 ref 进行优化？

Question

TL;DR
为什么是 useCallback定义为(大致)

function useCallback(callback, deps) {
  return useMemo((...args) => {
    return callback(...args);
  }, deps);
}

而不是这样？

function useCallback(callback) {
  const fn = useRef(callback);
  fn.current = callback;

  return useMemo((...args) => {
    return fn.current(...args);
  }, []);
}

似乎它可以解决不必要的重新渲染，同时始终使用该功能的最新版本。我还听说 Vue 3 在 this exact same way 中进行了优化使用 cacheHandlers选项。

上下文解释版本
在编写 react 组件/钩子(Hook)/上下文时，您可以直接编写函数:

const bootstrapAuth = async () => {
  // ...
};

…或使用 useCallback 优化最小重新渲染:

const bootstrapAuth = useCallback(async () => {
  // ...
}, []);

我自己我倾向于使用 useCallback经常，但作为一名老师，我不会从一开始就教我的学生。这是一个额外的复杂性，而且是。我知道官方考虑 只是性能问题 .只是 useMemo ，仅此而已。
但是当您开始组合效果和功能时，它可能变得至关重要，例如:

const bootstrapAuth = async () => {
  // ...
};
useEffect(() => {
  bootstrapAuth();
}, []);

^^ 这在技术上是不正确的(例如 linter 会提示)，但是，把 bootstrapAuth在依赖项数组中甚至更糟，因为它会在每次渲染时重新运行。似乎有三种解决方案:

Use useCallback .但这违反了它只是性能问题的原则，我不明白这在 React 社区中不是一个普遍存在的问题。我通常选择这种方法。

制作 bootstrapAuth幂等的，即比必要的更频繁地运行它不会造成额外的影响。使函数具有幂等性总是很聪明，但它似乎是一个奇怪的创可贴，因为它完全违背了效果 Hook 。当然，这不是通用的解决方案。

使用 ref，像这样(虽然这个例子有点做作):

const bootstrapAuthLatest = useRef(bootstrapAuth);
bootstrapAuthLatest.current = bootstrapAuth;

useEffect(() => {
  bootstrapAuthLatest.current();
}, []);

最后一个“技巧”虽然在这里有点做作，但似乎确实是辅助钩子(Hook)库中的首选方法，而且我自己也经常使用它，几乎每当我引入一个接受回调的钩子(Hook)时。这让你想知道，为什么 React 团队一开始没有像这样定义 useCallback ？

function useCallback(callback) {
  const fn = useRef(callback);
  fn.current = callback;

  return useMemo((...args) => {
    return fn.current(...args);
  }, []);
}

Answer 1

Myself I tend to use useCallback wherever, [...]

const bootstrapAuth = useCallback(async () => {
  // ...
}, []);

是相同的

const bootstrapAuth = async () => {
  // ...
};
const bootstrapAuthCallBack = useCallback(bootstrapAuth, [])

您有效地创建了一个附加函数(与不使用 useCallback 相比)，一个数组，分配了相应的内存并拥有 useCallback设置其属性并运行逻辑表达式。交换里面的所有东西 useCallback 不是 默认情况下使所有代码运行得更快。