React Hook之useCallback和useMemo的使用和源码分析

r囧r小猫 2023-02-16 04:22 37阅读 0赞

## 如何使用 ##

感觉useCallback和useMemo两者很像，前者返回一个memorized的回调函数，后者返回一个memorized的值。

看一下他们是如何定义的

1.  useCallback接受一个回调函数和依赖项数组作为参数，返回回调函数的memorized版本

// useCallback
    useCallback<T>(callback: T, deps: Array<mixed> | void | null): T

> 当这个回调函数传递给自组件时，可以用useCallback避免自组件非必要的渲染

--------------------

1.  useMemo接受创建函数和依赖项数组作为参数，会在依赖项发生改变时重新计算memorized值

// useMemo
    // 创建函数是有返回值的，这是跟useCallback不同的地方
    useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T

> 要避免每次渲染都进行高开销的计算时可以用useMemo

**综上：**

*  useCallback(callback, deps) 相当于useMemo(() => fn, deps);
 *  deps依赖项数组发生改变时，才会引起useCallbak和useMemo的返回值的更新
 *  不传deps时，组件每次渲染他们都会重新计算；
 *  deps传空数组\[\]时，只有组件首次加载会计算；

## 源码分析 ##

看源码，两者也是很相似的  
还是老套路，首次挂载组件时，走的时mount\*\*, 组件更新时走的是update\*\*  
useCallback和useMemo的源码部分比较相似和简单。

// mount阶段就是获取到传入的回调函数和依赖数组，保存到hook的memorizedState中，然后返回回调函数。
    function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T { 
      const hook = mountWorkInProgressHook();
      const nextDeps = deps === undefined ? null : deps;
      hook.memoizedState = [callback, nextDeps];
      return callback;
    }
    
    // update阶段
    function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T { 
      const hook = updateWorkInProgressHook();
     // 从hook的memorizedState中获取上次保存的值[callback， deps]，
      const nextDeps = deps === undefined ? null : deps;
      const prevState = hook.memoizedState;
      if (prevState !== null) { 
        if (nextDeps !== null) { 
          const prevDeps: Array<mixed> | null = prevState[1];
          // 比较新的deps和之前的deps是否相等
          if (areHookInputsEqual(nextDeps, prevDeps)) { 
          // 如果相等，返回memorized的callback
            return prevState[0];
          }
        }
      }
      // 如果deps发生变化，更新hook的memorizedState，并返回最新的callback
      hook.memoizedState = [callback, nextDeps];
      return callback;
    }

useMemo的源码如下：

// mount阶段， 执行创建函数获得返回值
    // 保存到hook的memorizedState中[nextValue, nextDeps]
    function mountMemo<T>(
      nextCreate: () => T,
      deps: Array<mixed> | void | null,
    ): T { 
      const hook = mountWorkInProgressHook();
      const nextDeps = deps === undefined ? null : deps;
      const nextValue = nextCreate();
      hook.memoizedState = [nextValue, nextDeps];
      return nextValue;
    }
    
    // update阶段
    function updateMemo<T>(
      nextCreate: () => T,
      deps: Array<mixed> | void | null,
    ): T { 
      const hook = updateWorkInProgressHook();
      // 获取新的deps
      const nextDeps = deps === undefined ? null : deps;
      // 从memorizedState中获得上次保存的值
      const prevState = hook.memoizedState;
      if (prevState !== null) { 
        if (nextDeps !== null) { 
        // 比较新deps和旧deps是否相等，如果两者相等，返回旧的创建函数的返回值
          const prevDeps: Array<mixed> | null = prevState[1];
          if (areHookInputsEqual(nextDeps, prevDeps)) { 
            return prevState[0];
          }
        }
      }
      // 如果deps发生改变，hook中保存新的返回值和deps,并返回新的创建函数的返回值
      const nextValue = nextCreate();
      hook.memoizedState = [nextValue, nextDeps];
      return nextValue;
    }