跳到主要内容

useMemo 与 useCallback

useCallback

在 useCallback 内部,mount 阶段调用 mountCallback 方法,将函数和依赖项一起缓存到 hook 对象的 memoizedState 属性上([callback, nextDeps])。

在 update 阶段调用 updateCallback 方法,首先拿到之前的 hook 对象(updateWorkInProgressHook()),从之前的 hook 对象的 memoizedState 属性上拿到之前的依赖数组,对比依赖项是否相同,如果相同则返回之前的 callback,否则就更新缓存,然后返回新的 callback。

useMemo

在 useMemo 内部,mount 阶段调用 mountMemo 方法,将传入的函数执行并得到计算值,将计算值和依赖项目存储到 hook 对象的 memoizedState 上面([nextValue, nextDeps]),最后向外部返回计算得到的值。

update 阶段调用 updateMemo 方法,首先拿到之前的 hook 对象,从而获取到之前的依赖项,和新传入的依赖项进行一个对比,如果相同,就返回上一次的计算值,否则重新调用传入的函数得到新的计算值并缓存,最后向外部返回新的计算结果。