React源码系列之五：hooks之useCallback，useMemo

东方石匠
1,298 阅读4分钟

前言

本次React源码参考版本为17.0.3。这是React源码系列第二篇，建议初看源码的同学从第一篇开始看起，这样更有连贯性，下面有源码系列链接。

热身准备

useCallback和useMemo是一样的东西，只是入参有所不同。

useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；

useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return；

官网有这样一段描述useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

所以这里，只以useCallback为例进行分析。

初始化 mount

mountCallback

如果各位看官是系列文章第一篇开始看的，看到这里估计就无压力，mountCallback就这几行代码，笔者没有做精简。

function mountCallback(callback, deps) {
  // 初始化hook结构
  var hook = mountWorkInProgressHook();
  // 使用者传进来的依赖数组
  var nextDeps = deps === undefined ? null : deps;
  // 以数组的形式将回调和依赖数组存储到对应fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }

  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就这几行代码，没有删减，代码意图也很简单，如果依赖数组deps没有变化，或者deps=[]的情况下，会返回之前缓存的回调函数，否则就更新对应fiber.memoizedState.hook.memoizedState并返回新的回调函数。

使用场景

就笔者的所见所闻，存在两种极端情况，一种开发者在开发时，不管什么函数，什么数据都喜欢使用useCallback，useMemo进行一层包裹。还有一种开发者不管什么情况都不会考虑使用useCallback，useMemo。

不用说，这两种做法都是有问题的。第一种做法，还不知道是之所以会出现这样的问题，根本原因还是很多开发者并不明白这两个hook的原理和使用场景。

首先，我们要明确函数组件在每一次更新时，都会执行函数组件，函数组件内部的所有方法，所有值都会重新声明，重新计算。这两个hook的出现就是为了优化这种情况，避免不必要的浪费。而这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是否要用缓存值，还是新的传进来的值。

这时候可能有人疑惑既然都会更新，那我全部包裹起来有什么不好？笔者认为都进行包裹主要的问题是，如果一个函数足够简单，从新声明可能性能消耗会比包裹后存储在hook.memoizedState的消耗更小。

这里，笔者根据自己看源码的心得，列举下这两个hook的使用场景：

  1. 如果子组件比较复杂，可以考虑使用useCallback进行包裹；
  2. 如果函数组件中某个值需要大量的计算才能得出，可以考虑使用useMemo进行包裹；
  3. 如果某个函数是子组件的props，可以考虑使用useCallback进行包裹（配合React.memo使用）；
  4. 自定义hooks中复杂逻辑可以考虑使用useCallback和useMemo进行包裹；

总结

这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：

这两个hook的做法就是通过将函数或者值存储在对应的fiber.memoizedState.hook.memoizedState上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。

虽然useCallback和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。

看完这篇文章， 我们可以弄明白下面这几个问题：

  1. useCallback和useMemo的区别？
  2. useCallback和useMemo的使用场景有哪些？
  3. useCallback和useMemo是做什么的？
  4. useCallback和useMemo是怎么实现优化性能的？

系列文章安排：

  1. React源码系列之一：Fiber；
  2. React源码系列之二：React的渲染机制；
  3. React源码系列之三：hooks之useState，useReducer；
  4. React源码系列之四：hooks之useEffect；
  5. React源码系列之五：hooks之useCallback，useMemo；
  6. React源码系列之六：hooks之useContext；
  7. React源码系列之七：React的合成事件；
  8. React源码系列之八：React的diff算法；
  9. React源码系列之九：React的更新机制；
  10. React源码系列之十：Concurrent Mode；

参考：

React官方文档 ；

github；

avatar
文章
阅读
粉丝