⚡️React 性能优化：useMemo 与 useCallback

useCallback和useMemo都是 React Hook，它们通过记忆值来帮助优化 React 应用程序的性能。它们都接受一个函数作为参数，并返回该函数的记忆版本。

下面简单解释一下两者的区别：

使用回调

useCallback是一个返回 memoized 回调函数的钩子。回调函数是一个作为参数传递给另一个函数的函数。在 React 的上下文中，回调函数通常用作事件处理程序或在组件之间传递数据。useCallback钩子接受两个参数：一个函数和一个依赖项数组。它将返回该函数的 memoized 版本，该版本仅在其中一个依赖项发生更改时才会更改。

以下是如何使用useCallback钩子的示例：

在此示例中，handleClick 函数作为事件处理程序传递给 button 元素。useCallback钩子确保仅当 count 属性发生变化时才会重新创建 handleClick 函数。如果 ParentComponent 频繁重新渲染，这将非常有用，因为它可以帮助防止不必要地重新创建该函数。

使用备忘录

useMemo是一个返回 memoized 值的钩子。它接受两个参数：一个返回值的函数和一个依赖项数组。只有当其中一个依赖项发生变化时，它才会调用该函数并返回其结果。

以下是如何使用useMemo钩子的示例：

在此示例中，processedData 值是通过调用传递给 useMemo 的函数创建的。该函数对 data 属性进行了一些开销较大的处理。useMemo hook 确保仅当 data 属性发生变化时才会重新计算 processedData 值。如果处理过程耗时较长，并且您不想不必要地重复执行，那么这会非常有用。

概括

总而言之，useCallback 和 useMemo 之间的主要区别在于它们返回值的类型。useCallback 返回一个记忆化的回调函数，而 useMemo 返回一个记忆化的值。这两个钩子都可以用来优化 React 组件的性能，避免不必要地重新创建函数或值。