React Hooks 中 useMemo 与 useCallback 的作用与区别

useCallback

返回一个缓存的函数，第一个参数为需要缓存的函数，第二个参数为依赖项数组，依赖项数组任一元素发生变化时，会重新返回新的参数函数，简单使用如下：

const memoizedCallback = useCallback(
  () => {
    console.log(a, b);
  },
  [a, b],
);

主要应用场景

父组件中需要传递函数到子组件，父组件每次更新都会重新声明内部的函数，导致传递给子组件的函数变化，子组件也会进行没有必要的更新，这种情况就可以利用 useCallback 处理传递给子组件的函数，避免每次父组件更新导致子组件更新的情况，因为只要 useCallback 的依赖项没有发生变化，传递给子组件的函数始终都是缓存的同一个函数。

注： 依赖项如果是引用类型，只会进行浅比较。

useMemo

返回一个缓存的值，第一个参数为需要执行的函数，第二个参数为依赖项数组，依赖项数组任一元素发生变化时，会重新执行函数，否则返回上一次缓存的函数执行结果，简单使用如下：

const cacheValue = useMemo(() => compute(a, b), [a, b]);

主要应用场景

缓存子组件，仅当有关联的属性发生变化时才会触发子组件的更新。举个简单的例子，父组件中有一个配置对象，配置对象中的属性分别由几个子组件分开展示，配置对象的数据来自服务端，每次去服务器端拉取配置对象在前端都会生成一个行的配置对象，即便其中的属性没有发生变化，子组件都会跟随父组件更新，此时我们可以分别对子组件用 useMemo 处理，将子组件关联的属性作为依赖项，依赖项不变，则子组件不更新，以此作为优化手段。

注： 依赖项如果是引用类型，只会进行浅比较。

useCallback 和 useMemo 的区别

看了上面的介绍相信你已经知道答案了，useCallback 返回的是缓存的函数，useMemo 返回的是计算的值，前者是将入参的函数缓存，后者是将入参的函数的执行结果缓存。