javascript - react : useCallback - useCallback with empty dependency array VS not using useCallback at all

Question

我正在优化应用程序的性能，我想知道是否对那些不依赖任何变量的函数使用 useCallback 钩子(Hook)。

考虑以下情况:
假设我们有一些功能:

const someFunc = () => {
  let someVar = "someVal";
  /**
   * here some extra calculations and statements regarding 'someVar'.
   * none of the statements depends on a variable outside this function scope.
   */
  return someVar;
};

该函数不依赖于任何变量，因此我们可以使用 useCallback 将其包装为空数组:

const someFunc = useCallback(() => {
  let someVar = "someVal";
  return someVar;
}, []);

现在我的问题是 - 是否:

react 实际上声明了函数(带有内存分配和类似的东西):

const someFunc = () => {
  let someVar = "someVal";
  return someVar;
};
const someFuncCallback = React.useCallback(someFunc , [])

或 react 是否首先检查依赖项数组，如果没有任何依赖项更改为以前在内存中分配的函数？

如果第一个语句为真，那么我们不应该在不依赖任何其他 var 的函数上使用 useCallback，因为无论如何该函数都会被重新声明。

但是如果第二个语句是真的，那么我们应该在任何更“昂贵”的函数上使用 useCallback 钩子(Hook)来声明一个单独的 useCallback 调用语句，但我不知道调用它来响应 useCallback 有多昂贵(从内存的 Angular 来看和 CPU 使用率)。

我找到了 this very nice blog它说第一个陈述是正确的。但如果你检查 react docs about useCallback hook你会看到它写react useCallback 使用内存调用，这意味着 returning the cached result when the same inputs occur again ，所以也许我没有得到一些东西，其中哪一个是正确的？

Answer 1

每次你的组件重新渲染时，都会创建一个新的函数实例，useCallback 只是一个添加，它将引用分配给另一个变量 .

无论您是否使用 useCallback，都会重新创建原始函数。

也可以使用 useCallback react 实际上会记住作为参数传递给它的函数，如果依赖项没有改变，则在下次重新渲染时返回该函数的相同引用。

另请注意，如果您使用 useCallback如果您将函数作为 Prop 传递给子组件，它也会优化子组件的重新渲染。

因此，当您将函数传递给子组件或将其用作 useEffect 或使用 useCallback 调用的其他函数的依赖项时，使用 useCallback Hook 是最佳选择

查看 more details 的文档.

Returns a memoized callback.

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).