React18 源码解析之 useCallback 和 useMemo

蚊子前端博客
发布于 2022-10-14 00:33
本篇文章我们主要了解下 useCallback 和 useMemo 是如何来优化React组件的。

我们解析的源码是 React18.1.0 版本，请注意版本号。React 源码学习的 GitHub 仓库地址：https://github.com/wenzi0github/react。

React 中有两个 hooks 可以用来缓存函数和变量，提高性能，减少资源浪费。那什么时候会用到 useCallback 和 useMemo 呢？

1. 使用场景

useCallback 和 useMemo 的使用场景稍微有点不一样，我们分开来说明。

1.1 useCallback

我们知道 useCallback 可以缓存函数体，在依赖项没有变化时，前后两次渲染时，使用的函数体是一样的。

很多同学觉得用 useCallback 包括函数，可以减少函数创建的开销 和 gc。但实际上，现在 js 在执行一些闭包或其他内联函数时，运行非常快，性能非常快。若不恰当的使用 useCallback 包括一些函数，可能还会适得其反，因为 React 内部还需要创建额外的空间来缓存这些函数体，并且还要监听依赖项的变化。

如下面的这种方式其实就很没有必要：

COPYJAVASCRIPT
function App() {
  // 没必要
  const handleClick = useCallback(() => {
    console.log(Date.now());
  }, []);

  return <button onClick={handleClick}>click me</button>;
}

那 useCallback 在什么场景下会用到呢？

  • 函数作为其他 hook 的依赖项时（如在 useEffect()中）；

  • 函数作为 React.memo()（或 shouldComponentUpdate ）中的组件的 props；

我们来一一看下。

1.1.1 作为其他 hook 的依赖项

我们经常会有请求数据的场景，然后在 useEffect() 中触发：

COPYJAVASCRIPT
function App() {
  const [state, setState] = useState();
  const requestData = async () => {
    // fetch
    setState();
  };
  useEffect(() => {
    requestData();
  }, []);
}

我们在官方脚手架 create-react-app 写这段代码时，他就会给出提示，大致意思是 useEffect 使用了外部的变量，需要将其添加到依赖中，即：

COPYJAVASCRIPT
useEffect(() => {
  requestData();
}, [requestData]); // 将 requestData 添加到依赖项中

如若只是把它添加到依赖项中，再执行代码时，会发现代码陷入了无限循环。这是因为函数 requestData() 在每次 render()时，都是重新定义的，导致依赖项发生了变化，就会执行里面的 requestData()，进而触发 setState()进行下次的渲染，陷入无限循环。

为什么明明是同一个函数体，两个变量却不一样呢？比如下面的这个例子：

COPYJAVASCRIPT
const funcA = () => {
  console.log('www.xiabingbao.com');
};
const funcB = () => {
  console.log('www.xiabingbao.com');
};

console.log(funcA === funcB); // false

他们的函数体仅仅是看起来是一样的，但实际上是完全独立的两个个体。上面的 requestData()同理，每次都是重新声明一个新的，跟之前的函数肯定就不一样了。

这个时候，我们就需要把 requestData()用useCallback()包裹起来：

COPYJAVASCRIPT
const requestData = useCallback(async () => {
  // fetch
  setState();
}, []);

这就能保证函数 requestData()在多次渲染过程中是一致的（除非依赖项发生变化）。

1.1.2 作为 React.memo()等组件的 props；

有一些我们是需要向子组件传入回调函数的场景，比如 onClick, onSuccess, onClose 等。

COPYJAVASCRIPT
function Count({ onClick }) {
  const [count, setCount] = useState(count);

  const handleClick = () => {
    const nextCount = count + 1;
    setCount(nextCount);
    onClick(nextCount);
  };

  console.log('Count render', Date.now());

  return <button onClick={handleClick}>click me</button>;
}

function App() {
  const [now, setNow] = useState(0);
  const handleClick = count => {
    console.log('App count', count);
  };

  return (
    <div>
      <p>
        <button onClick={() => setNow(Date.now())}>set new time</button>
      </p>
      <Count onClick={handleClick} />
    </div>
  );
}

函数组件 <App /> 中的 handleClick 传给了子组件 <Count />，当父级组件触发更新时，子组件也会执行，只不过 state 没有变化而已。那么如何避免子组件必须要的刷新呢？这里我们就需要用到 React.memo 了（注意，这里不是 useMemo()）。

React.memo()可接受 2 个参数，第一个参数为纯函数的组件；第二个参数是 compare(prevProps, nextProps)函数（可选），用于自行实现功能，对比 props ，控制是否刷新。

我们用React.memo()包裹住函数组件后，只需要保证传入的 props 不发生变化，那么函数组件就不会二次执行。

COPYJAVASCRIPT
const MemoCount = React.memo(<Count />);

那传入的各种 callback 就得用useCallback()来封装了，如上面的 handleClick:

COPYJAVASCRIPT
const handleClick = useCallback(count => {
  console.log('App count', count);
}, []);

1.2 useMemo

useMemo() 与 useCallback() 的功能很像，只不过 useMemo 用来缓存函数执行的结果，而 useCallback()用来缓存函数体。

1.2.1 useMemo 的使用

如每次渲染时都要执行一段很复杂的运算，或者一个变量需要依赖另一个变量的运算结果，就都可以使用useMemo()。

比如有一个计算百分比的场景：用户可以在某个项目中，捐赠自己的虚拟金币，不过项目接收的虚拟金币有上限，然后实时显示该项目的受捐进度。同时，进度展示这里，还有几个其他的规则：

  1. 进度的百分比的数字显示整数，向下取整；

  2. 只要有捐助行为，则百分比至少为 1%；

  3. 进度不能超过 100%（最后一次的捐赠可能会超过上限）；

在某个组件获取进度百分比的时候，我们这里可以封装到useMemo()中，因为进度的百分比只跟当前进度和总上限有关系。

COPYJAVASCRIPT
const curPercent = useMemo(() => {
  if (progress === 0 || topLimit === 0) {
    return 0;
  }
  const percent = (progress * 100) / topLimit;
  if (percent <= 1) {
    return 1;
  }
  if (percent >= 100) {
    return 100;
  }
  return Math.floor(percent);
}, [progress, topLimit]);

若当前进度和总上限没有变化时，则不用重新计算百分比。

1.2.2 其他变体

其实我们可以看到，useMemo()类似于 useEffect() 和 useState() 的组合体：

COPYJAVASCRIPT
const [curPercent, setCurPercent] = useState(0);

useEffect(() => {
  if (progress === 0 || topLimit === 0) {
    setCurPercent(0);
    return;
  }
  const percent = (progress * 100) / topLimit;
  if (percent <= 1) {
    setCurPercent(1);
    return;
  }
  if (percent >= 100) {
    setCurPercent(100);
    return;
  }
  setCurPercent(Math.floor(percent));
}, [progress, topLimit]);

相应地，若遇到上面需要用 useEffect 和 useState 实现的场景，就可以直接用useMemo()来实现。

而且，useCallback()也是可以用 useMemo()来实现的。因为 useMemo()返回的是函数执行的结果，那我们返回的结果就是一个函数不就行了。

COPYJAVASCRIPT
const handleClick = useMemo(() => {
  // 返回一个函数
  return () => {
    console.log(Date.now());
  };
}, []);

hanleClick();

2. 源码

我们了解了 useCallback() 和 useMemo() 的基本用法之后，再来了解下他们源码的实现。

我们在之前 renderWithHooks 的章节中也了解到，所有的 hooks 在内部实现时，都区分了 mount 阶段和 update 阶段，useCallback()和 useMemo() 两个 hooks 也不例外。

2.1 useCallback 的源码

useCallback()在 React 内部实现时，分成了 mountCallback()和 updateCallback()。

  • mountCallback: 生成 hook 节点，并存储回调函数 callback 和依赖项 deps；

  • updateCallback: 新的依赖项与之前存储的依赖项进行对比，若没有变化，则直接返回，否则存储新的回调函数和依赖项；

2.1.1 mountCallback

初始化时很简单，就是把传入的 callback 和依赖项 deps 存储起来。

COPYJAVASCRIPT
/**
 * useCallback的创建
 * @param callback
 * @param deps
 * @returns {T}
 */
function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook(); // 创建一个新的hook节点
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps]; // 直接将callback和依赖项进行存储
  return callback;
}

可以看到，这里用数组的方式，把 callback 和依赖项存储到了 hook 节点的 memoizedState 属性上，然后返回这个 callback。因此我们执行 useCallback()的返回值就是这个传入 callback。

2.1.2 updateCallback

updateCallback 的实现相对来说，也比较简单，关键点就在于依赖项的对比。

COPYJAVASCRIPT
/**
 * useCallback的更新
 * @param callback
 * @param deps
 * @returns {T|*}
 */
function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState; // 取出上次存储的数据: [callback, prevDeps]

  // 若之前的数据不为空
  if (prevState !== null) {
    if (nextDeps !== null) {
      /**
       * 若依赖项不为空，且前后两个依赖项没有发生变化时，
       * 则直接返回之前的callback（prevState[0]）；
       * 有个 areHookInputsEqual() 我们先不关心细节，只需要知道是用来对比依赖项的
       */
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 若依赖项没有变化，则返回之前存储的callback
        return prevState[0];
      }
    }
  }

  /**
   * 若依赖项为空，或者依赖项发生了变动，则重新存储callback和依赖项
   * 然后返回最新的callback
   */
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

若前后两个依赖项都不为空，且依赖项没有发生变动，则直接返回之前存储的 callback，达到了缓存的目的。

若依赖项为空，或者依赖项发生了变化，则重新存储 callback 和依赖项，然后返回最新的 callback。因此，若不设置依赖项，或者依赖项一直在变，则无法达到缓存的目的。

这里有个工具函数 areHookInputsEqual()，该函数的作用，就是用来对比前后两个依赖项中所有的数据是否发生了变化，只要有一项的数据发生了变化（相同位置前后的两个数据不相等），则认为依赖项产生了变动。

2.2 useMemo 的源码

useMemo()的实现，与 useCallback 很相似，只不过在 useMemo()中，执行了 callback，然后缓存的是其返回的结果。

useMemo()在 React 内部实现时，分成了 mountMemo()和 updateMemo()。

  • mountMemo: 生成 hook 节点，并存储回调函数 callback 执行的结果和依赖项 deps；

  • updateMemo: 新的依赖项与之前存储的依赖项进行对比，若没有变化，则直接返回，否则存储新的回调函数的执行结果和依赖项；

2.2.1 mountMemo

初始节点源码的实现：

COPYJAVASCRIPT
/**
 * useMemo的创建
 * @param nextCreate
 * @param deps 依赖项
 * @returns {T}
 */
function mountMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
  const hook = mountWorkInProgressHook(); // 在链表的末尾创建一个hook节点
  const nextDeps = deps === undefined ? null : deps;

  /**
   * 计算useMemo里callback的返回值
   * 这是与 useCallback() 不同的地方，这里会执行回调函数callback
   */
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps]; // 将返回值和依赖项进行存储
  return nextValue; // 返回执行callback()的返回值
}

我们从源码中可以看到，在 mountMemo()里，会执行回调函数 callback()，然后存储该函数的返回结果。

2.2.2 updateMemo

在了解 updateCallback()的源码后，updaeMemo()的源码也很好理解。

COPYJAVASCRIPT
/**
 * useMemo的更新
 * @param nextCreate
 * @param deps
 * @returns {T|*}
 */
function updateMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (prevState !== null) {
    // Assume these are defined. If they're not, areHookInputsEqual will warn.
    if (nextDeps !== null) {
      const prevDeps: Array<mixed> | null = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 若依赖项没有变化，则返回之前存储的结果
        return prevState[0];
      }
    }
  }
  // 重新计算callback的返回结果，并进行存储
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

当依赖项不为空，且没有变化时，直接返回之前存储的数据；否则执行最新的回调函数，然后存储该函数最新的返回结果，并返回。

3. 总结

这是 React 源码内部实现起来比较简单的 hooks，我们先做个开胃菜，后续比如 useState(), useEffect() 等 hooks，整体的逻辑会更加复杂一些。

参考链接：

标签：
阅读(1606)

公众号：

qrcode

微信公众号：前端小茶馆

相关文章

React:实现一个带有loading效果的按钮组件 (2019/05/10)
实现react组件的递归调用 (2019/05/12)
Can’t perform a React state update on an unmounted component (2019/06/03)
nextjs 如何将静态资源发布到 CDN (2019/09/17)
如何构建自己的 react hooks (2019/11/15)
腾讯抢金达人中倒计时的实现与改进 (2020/03/05)

公众号：

qrcode

微信公众号：前端小茶馆