React.js 近年来变得非常流行，这已不是什么秘密。 它现在是许多互联网巨头（例如 Facebook 和 WhatsApp）选择的 JavaScript 库。 它崛起的主要原因之一是16.8版本中引入了hooks。 React hooks 允许您利用 React 功能，而无需编写类组件。 现在，带有钩子的功能组件已成为使用 React 的开发人员的首选框架。 在这篇博文中，我们将深入研究一个特定的钩子——useCallback——因为它涉及函数式编程的一个基本部分，即记忆化。 您将确切地知道如何以及何时使用钩子 useCallback 并充分利用其性能增强功能。 准备好了吗？ 让我们深入了解一下吧！ 什么是记忆化？ 记忆化是指复杂函数存储其输出，以便下次使用相同的输入调用它。 它类似于缓存，但在更本地的级别。 您可以跳过任何复杂的计算，并在计算后更快地返回输出。
这会对内存分配和性能产生重大影响
而 useCallback 钩子旨在缓解这种压力。 React 的 UseCallback 与 useMemo 在这一点上，值得一提的是 useCallbackit 与另一个名为 useMemo 的钩子 沙特电话号码数据 配合得很好。 我们将讨论两者，但在本文中，我们将重点关注 useCallback 作为主要主题。 关键区别在于 useMemoit 返回一个记忆值，而 useCallback 返回一个记忆函数。 这意味着useMemoit用于存储计算值，而useCallback返回一个可以稍后调用的函数。 这些钩子将返回一个缓存版本给您，除非您更改它们的任何依赖项（例如状态或道具）。 让我们看看这两个函数的作用： 从 ‘react’ 导入 { useMemo, useCallback } 常量值 = [3, 9, 6, 4, 2, 1] // 这将始终返回相同的值，即一个排序数组。 一旦值数组发生变化，就会重新计算。 const memoizedValue = useMemo(() => value.sort(), [values]) // 这将返回一个可以稍后调用的函数。
使用内存中的虚拟 DOM 来比较数据并决定更新内容
虚拟 DOM 有助于提高 React 性能并保持您的应用程序快速运行。 默认情况下，如果组件的任何值发生更改，整个组件将重新渲染。 这使得 React 对用户输入“做出反应”，并允许屏幕刷新而无需重新加载页面。 您不想渲染组件，因为更改不会影响该组件。 这就是通过 useCallback 和 useMemo 进行记忆的有用之处。 当 React 重新渲染您的组件时，它还会重新创建您在组件内声明的函数。 请注意，当比较一个函数与另一个函数的相等性时，它们始终为 false。 由于函数 BS 领先 也是一个对象，因此它仅等于其自身： // 这些变量包含完全相同的功能，但它们不相等 const hello = () => console.log(‘你好马特’) const hello2 = () => console.log(‘你好马特’) 你好 === hello2 // 假 你好 === 你好 // true 换句话说，当 React 重新渲染你的组件时，它会将组件中声明的任何函数视为新函数。 大多数时候这都很好，简单的函数很容易计算并且不会影响性能。 但其他时候，当你不希望该功能看起来像新功能时，你可以依靠它使用Callback来帮助你。
