时间戳

首页 > 解决方案 > 反应：useCallback - useCallback 与空依赖数组 VS 根本不使用 useCallback

javascript - 反应：useCallback - useCallback 与空依赖数组 VS 根本不使用 useCallback

问题描述

我正在优化应用程序的性能，我想知道是否对那些不依赖任何变量的函数使用 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;
}, []);

现在我的问题是 - 是否：

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

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

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

我发现这个非常好的博客说第一个陈述是正确的。但是如果你查看关于 useCallback 钩子的 react 文档，你会看到它写的是 react useCallback 使用记忆调用，这意味着returning the cached result when the same inputs occur again，所以也许我没有得到一些东西，其中哪一个是正确的？

标签： javascriptreactjsperformance

解决方案

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

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

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

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

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

查看文档以获取更多详细信息。

返回一个记忆化的回调。

传递一个内联回调和一组依赖项。useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。这在将回调传递给依赖引用相等以防止不必要的渲染（例如shouldComponentUpdate）的优化子组件时很有用。

useCallback(fn, deps)相当于useMemo(() => fn, deps)。

推荐阅读