二者区别
- 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。
用法
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，并返回最新结果。
网友评论