React 中的 useCallback 钩子和记忆

Question

尝试理解 React 中的

useCallback()

钩子。在博客文章中有人说它解决了以下问题：

在深入了解 useCallback() 的使用之前，让我们先区分一下 useCallback() 解决的问题 — 函数相等性检查。

JavaScript 中的函数是一等公民，这意味着函数是一个常规对象。函数对象可以由其他函数返回、进行比较等：您可以对对象执行的任何操作。

让我们编写一个函数factory()，它返回求和的函数 数字：

function factory() {
  return (a, b) => a + b;
}

const sumFunc1 = factory();
const sumFunc2 = factory();

console.log(sumFunc1(1, 2)); // => 3
console.log(sumFunc2(1, 2)); // => 3

console.log(sumFunc1 === sumFunc2); // => false
console.log(sumFunc1 === sumFunc1); // => true

sumFunc1

和

sumFunc2

是对两个数字求和的函数。它们是由

factory()

功能。

函数

sumFunc1

和

sumFunc2

共享相同的代码源，但它们是不同的>函数对象。比较它们

sumFunc1 === sumFunc2

评估结果为 false。

这就是 JavaScript 对象的工作原理。对象（包括函数对象）>仅等于其自身。

所以我的问题：

1. sumFunc1 === sumFunc2

   如何返回 false
2. useCallback() 钩子如何解决这个问题

3. useCallback()

   钩子实际上是如何用于记忆的？

Answer 1

我认为 useCallback

 钩子

上的 React 文档的最新版本回答了您的所有三个问题。

1. sumFunc1 === sumFunc2

   如何返回 false？

“在 JavaScript 中，

function () {}

或

() => {}

始终创建不同的函数，类似于

{}

对象文字始终创建新对象” - 来自文档。进一步扩展一下，在 JS 中，函数是对象，它们引用内存中的特定块。因此，当您创建一个新函数时，您实际上创建了一个指向新内存块的新对象。 Karol 的这个答案 通过实际规范进一步扩展了这一点。

2. useCallback()

   钩子如何解决这个问题？

挂钩不会在重新渲染时重新创建函数，而是会缓存您的函数，直到其依赖项发生变化。他们在文档中有一个很棒的交互式示例。

3. useCallback()

   钩子实际上是如何用于记忆的？

它用作您想要保留的函数的包装器，或者更准确地说，您不想更改的函数，除非其依赖项（例如参数）发生变化以减少重新渲染的次数。 对于这一点，请务必查看文档中的交互式示例。

⚠️请注意，不要对每个函数都使用记忆化。 这是一篇很棒的文章，它解释了利弊、时间和地点。