useCallback和useMemo的区别及使用场景

二者区别

• useCallback 缓存函数本身
• useMemo缓存函数调用的结果

二者相同

缓存的作用

下面介绍一下useCallback和 useMemo

useCallback

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。

const cachedFn = useCallback(fn, dependencies)

参数

• fn：想要缓存的函数。此函数可以接受任何参数并且返回任何值。React 将会在初次渲染而非调用时返回该函数。当进行下一次渲染时，如果 dependencies 相比于上一次渲染时没有改变，那么 React 将会返回相同的函数。否则，React 将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。React 不会调用此函数，而是返回此函数。你可以自己决定何时调用以及是否调用
• dependencies：有关是否更新 fn 的所有响应式值的一个列表。响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。依赖列表必须具有确切数量的项，并且必须像 [dep1, dep2, dep3] 这样编写。React 使用 Object.is 将每个依赖项与其之前的值进行比较。

返回值

在初次渲染时，useCallback 返回你已经传入的 fn 函数

在之后的渲染中, 如果依赖没有改变，useCallback 返回上一次渲染中缓存的 fn 函数；否则返回这一次渲染传入的 fn。

用法

• 跳过组件的重新渲染
• 从记忆化回调中更新 state
• 防止频繁触发 Effect
• 优化自定义 Hook

useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

const cachedValue = useMemo(calculateValue, dependencies)

参数

• calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。

• dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。依赖项数组的长度必须是固定的并且必须写成 [dep1, dep2, dep3] 这种形式。React 使用 Object.is 将每个依赖项与其之前的值进行比较

返回值

在初次渲染时，useMemo 返回不带参数调用 calculateValue 的结果。

在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 calculateValue，并返回最新结果。

用法

• 跳过代价昂贵的重新计算
• 跳过组件的重新渲染
• 记忆另一个 Hook 的依赖
• 记忆一个函数