更简单更方便的useMemo和useCallback

2024-01-14 10:44:32





## 前言

在React中，为了提升性能，我们常常会使用一些函数式编程的优化技巧，其中useMemo和useCallback是两个非常常用的Hook。useMemo用于缓存函数的返回值，而useCallback用于缓存函数本身。本文将从使用者的角度出发，分别对这两个Hook进行讲解，让您对它们有更深入的理解和应用。

## useMemo

useMemo是一个React Hook，它可以缓存一个函数的返回值。这意味着，当该函数的输入参数没有改变时，函数的返回值将被复用，而不会重新计算。这可以显著提高性能，尤其是当函数的计算成本很高时。

useMemo的语法如下：

```javascript
const memoizedValue = useMemo(() => {
  // 计算并返回一个值
}, [dependencies]);

其中，memoizedValue是函数的返回值，dependencies是一个数组，其中包含了函数的依赖项。当dependencies中的任何一个值发生变化时，函数将重新计算并返回一个新的值。

useMemo的用例

useMemo的用例非常广泛，以下是一些常见的场景：

缓存昂贵的函数调用。例如，如果您有一个函数需要从服务器获取数据，您可以使用useMemo来缓存函数的返回值，这样当组件重新渲染时，函数不会被重新调用。
缓存组件的子组件。如果您有一个组件的子组件非常昂贵，您可以使用useMemo来缓存子组件的输出，这样当组件重新渲染时，子组件不会被重新渲染。
缓存状态值。如果您有一个状态值需要根据其他状态值计算，您可以使用useMemo来缓存计算结果，这样当其他状态值发生变化时，计算结果不会被重新计算。

useCallback

useCallback是一个React Hook，它可以缓存一个函数本身。这意味着，当该函数的引用没有改变时，函数本身将被复用，而不会重新创建。这可以显著提高性能，尤其是当函数需要被传递给子组件时。

useCallback的语法如下：

const memoizedCallback = useCallback(() => {
  // 执行一些操作
}, [dependencies]);

其中，memoizedCallback是函数本身，dependencies是一个数组，其中包含了函数的依赖项。当dependencies中的任何一个值发生变化时，函数将重新创建。

useCallback的用例

useCallback的用例也非常广泛，以下是一些常见的场景：

缓存事件处理程序。如果您有一个组件需要处理很多事件，您可以使用useCallback来缓存事件处理程序，这样当组件重新渲染时，事件处理程序不会被重新创建。
缓存子组件的回调函数。如果您有一个组件的子组件需要使用回调函数，您可以使用useCallback来缓存回调函数，这样当子组件重新渲染时，回调函数不会被重新创建。
缓存状态值的变化处理函数。如果您有一个状态值需要根据其他状态值的变化进行处理，您可以使用useCallback来缓存变化处理函数，这样当其他状态值发生变化时，变化处理函数不会被重新创建。