使用空依赖数组的useCallback - useCallback与根本不使用useCallback的

Question

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

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

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 , [])

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

如果第一个语句是真的，那么我们不应该对不依赖于任何其他var的函数使用useCallback，因为函数无论如何都会再次声明。

但是如果第二条语句是正确的，那么我们应该在任何函数上使用useCallback钩子来声明单个useCallback调用语句，但是我不知道调用来响应useCallback (从内存和CPU使用的角度)的代价有多大。

我找到了这个很好的博客，它说第一句话是真的。但是，如果你检查关于useCallback钩子的反应文档，你会看到它的反应，useCallback使用记忆调用，意思是returning the cached result when the same inputs occur again，所以也许我没有得到一些东西，其中哪一个是正确的？

​

Answer 1

每次您的组件重新呈现时，都会创建一个新的函数实例，只是一个加法，它将引用赋给另一个变量。

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

另外，随着useCallback的使用，react实际上回传了作为参数传递给它的函数，如果依赖项没有改变，则返回函数在下一次重呈现时的相同引用。

还请注意，如果使用useCallback函数，如果将函数作为支柱传递给子组件，它也会优化子组件的重新呈现。

因此，当您将函数传递给子组件或将其用作useEffect或与useCallback调用的其他函数的依赖项时，使用useCallback钩子是最优的。

检查文档中是否有更多细节。

返回回忆录回调。 传递一个内联回调和一个依赖项数组。useCallback将返回回调的回忆录版本，只有在某个依赖项已更改时才会进行更改。这在将回调传递到依赖引用相等以防止不必要呈现(例如shouldComponentUpdate)的优化子组件时非常有用。 useCallback(fn, deps)等同于useMemo(() => fn, deps)。