结合高阶函数聊聊useMemo和useCallback

Hook 是 react 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 react 特性。

useCallback和useMemo是其中的两个 hooks，本文旨在通过解决一个需求，结合高阶函数，深入理解useCallback和useMemo的用法和使用场景。 之所以会把这两个 hooks 放到一起说，是因为他们的主要作用都是性能优化，且使用useMemo可以实现useCallback。

需求说明

先把需求拎出来说下，然后顺着需求往下捋useCallback和useMemo，这样更好理解为什么要使用这两个 hooks。需求是：当鼠标在某个 dom 标签上移动的时候，记录鼠标的普通移动次数和加了防抖处理后的移动次数。

技术储备

本文主要介绍useCallback和useMemo，所以遇到useState时就不做特殊说明了，如果对useState还不了解，请参看官方文档。

该需求需要用到防抖函数，为方便调试，先准备一个简单的防抖函数（一个高阶函数）:

function debounce(func, delay = 1000) {
  let timer;

  function debounced(...args) {
    debounced.cancel();
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  }

  debounced.cancel = function () {
    if (timer !== undefined) {
      clearTimeout(timer);
      timer = undefined;
    }
  }
  return debounced
}

不合格的解决方案

根据需求，写出来组件大致会是这样：

function Example() {
  const [count, setCount] = useState(0);
  const [bounceCount, setBounceCount] = useState(0);
  const debounceSetCount = debounce(setBounceCount);

  const handleMouseMove = () => {
    setCount(count + 1);
    debounceSetCount(bounceCount + 1);
  };

  return (
    <div onMouseMove={handleMouseMove}>
      <p>普通移动次数: {count}</p>
      <p>防抖处理后移动次数: {bounceCount}</p>
    </div>
  )
}

效果貌似是对的，在debounced里打印日志看下：

function debounce(func, delay = 1000) {
    // ... 省略其他代码
    timer = setTimeout(() => {
      // 在此处添加了一行打印代码
      console.log('run-do');
      func.apply(this, args);
    }, delay);
    // ... 省略其他代码
}

当鼠标在div标签上移动时，打印结果[如图]：

我们发现，当鼠标停止移动后，run-do被打印的次数，跟鼠标移动次数相同，这说明防抖功能并未生效。是哪里出问题了呢？

首先我们要清楚的是，使用debounce的目的是通过debounce返回一个debounced函数（注意：此处是debounced，而不是debounce，下文同样要注意这个细节，否则意思就完全不对了），然后每次执行debounced时，通过闭包内的timer清掉之前的setTimeout，达到一段时间不活动后执行任务的目的。

再来看看我们的Example组件，每次Example组件的更新渲染，都会通过debounce(setBounceCount)生成一个新的debounceSetCount，也就是每次的更新渲染，debounceSetCount都是指向不同的debounced，不同的debounced使用着不同的timer，那么debounce函数里的闭包就失去了意义，所以才会出现截图中的情况。

但是，为什么bounceCount的值看着像是进行过防抖处理一样呢？
那是debounceSetCount(bounceCount + 1)在多次执行时，因为debounce内的setTimeout使得bounceCount参数值是相同的，所以通过run-do的打印次数才把问题暴露了出来。

useCallback

我们使用useCallback修改下我们的组件：

function Example() {
  // ... 省略其他代码
  // 相比之前的 Example 组件，我们只是增加了 useCallback hook
  const debounceSetCount = React.useCallback(debounce(setBounceCount), []);
  // ... 省略其他代码
}

这时再用鼠标在div标签上移动时，效果跟我们的需求一致了，[如图]:

通过useCallback，我们貌似解决了之前存在的问题（其实这里面还有问题，我们后面会说到）。

那么，useCallback是怎么解决问题的呢？
看下useCallback的调用签名：

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: ReadonlyArray<any>): T;

// 示例：
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

通过useCallback的签名可以知道，useCallback第一个参数是一个函数，返回一个 memoized 回调函数，如上面代码中的 memoizedCallback 。useCallback的第二个参数是依赖(deps)，当依赖改变时才更新 memoizedCallback ，也就是在依赖未改变时（或空数组无依赖时）， memoizedCallback 总是指向同一个函数，也就是指向同一块内存区域。当把 memoizedCallbac 当作 props 传递给子组件时，子组件就可以通过shouldComponentUpdate等手段避免不必要的更新。

当Example组件首次渲染时，debounceSetCount的值是debounce(setBounceCount)的执行结果，因为通过useCallback生成debounceSetCount时，传入的依赖是空数组，所以Example组件在下一次渲染时，debounceSetCount会忽略debounce(setBounceCount)的执行结果，总是返回Example第一次渲染时useCallback缓存的结果，也就是说debounce(setBounceCount)的执行结果通过useCallback缓存了下来，解决了debounceSetCount在Example每次渲染时总是指向不同debounced的问题。

我们上面说过，这里面其实还有一个问题，那就是每次Example组件更新的时候，debounce函数都会执行一次，通过上面的分析我们知道，这是一次无用的执行，如果此处的debounce函数里有大量的计算的话，就会很影响性能。

useMemo

看下使用useMemo如何解决这个问题呢：

function Example() {
  const [count, setCount] = useState(0);
  const [bounceCount, setBounceCount] = useState(0);
  const debounceSetCount = React.useMemo(() => debounce(setBounceCount), []);

  const handleMouseMove = () => {
    setCount(count + 1);
    debounceSetCount(bounceCount + 1);
  };

  return (
    <div onMouseMove={handleMouseMove} >
      <p>普通移动次数: {count}</p>
      <p>防抖处理后移动次数: {bounceCount}</p>
    </div>
  )
}

现在，每次Example更新渲染时，debounceSetCount都是指向同一块内存，而且debounce只会执行一次，我们的需求完成了，我们的问题也都得到了解决。

useMemo是怎么做到的呢？
看下useMemo的调用签名：

function useMemo<T>(factory: () => T, deps: ReadonlyArray<any> | undefined): T;

// 示例：
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

通过useMemo的签名可以知道，useMemo第一个参数是一个 factory 函数，该函数的返回结果会通过useMemo缓存下来，只有当useMemo的依赖(deps)改变时才重新执行 factory 函数，memoizedValue 才会被重新计算。 也就是在依赖未改变时（或空数组无依赖时），memoizedValue 总是返回通过useMemo缓存的值。

看到这里，相信细心的你也已经发现了，useCallback(fn, deps) 其实相当于 useMemo(() => fn, deps)，所以在最开始我们说：使用useMemo完全可以实现useCallback。

广州品牌设计公司https://www.houdianzi.com

特别注意

React 官方有这么一句话: 
你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。 

显然，我们的代码中，如果去掉useMemo是会出问题的，对此，可能有人会想，改装下debounce防抖函数就可以了，例如：

function debounce(func, ...args) {
  if (func.timeId !== undefined) {
    clearTimeout(func.timeId);
    func.timeId = undefined;
  }

  func.timeId = setTimeout(() => {
    func(...args);
  }, 200);
}

// 使用 useCallback
function Example() {
  // ... 省略其他代码
  const debounceSetCount = React.useCallback((...args) => {
    debounce(setBounceCount, ...args);
  }, []);
  // ... 省略其他代码
}

// 不使用 useCallback
function Example() {
  // ... 省略其他代码
  const debounceSetCount = changeCount => debounce(setBounceCount, changeCount);
  // ... 省略其他代码
}

貌似去掉了useMemo也能实现我们的需求，但显然，这是一种非常将就的解决方案，一旦遇到像修改前的debounce这样的高阶函数就束手无策了。