超性感的React Hooks（十一）useCallback、useMemo

在实践开发中，有一种优化手段叫做记忆函数。

什么是记忆函数？用一个例子来说明。

我们想要计算从1到某个整数的总和。封装一个方法来实现这个目的。

function summation(target: number) {
  let sum = 0;
  for(let i = 1; i <= target; i++) {
    sum += i;
  }
  return sum;
}

验证一下结果，没有问题。

这个时候，我们思考一个问题，当我们重复调用summation(100)时，函数内部的循环计算是不是有点冗余？因为传入的参数一样，得到的结果必定也是一样，因此如果传入的参数一致，是不是可以不用再重复计算直接用上次的计算结果返回呢？

当然可以，利用闭包能够实现我们的目的。

// 初始化一个非正常数字，用于缓存上一次的计算结果
let preTarget = -1;
let memoSum = 0;

export function memoSummation(target: number) {
  // 如果传入的参数与上一次一样，直接换回缓存结果
  if (preTarget > 0 && preTarget === target) {
    return memoSum;
  }

  console.log('我出现，就表示重新计算了一次');
  // 缓存本次传入的参数
  preTarget = target;
  let sum = 0;
  for (let i = 1; i <= target; i++) {
    sum += i;
  }
  // 缓存本次的计算结果
  memoSum = sum;
  return sum;
}

多次调用memoSummation(1000)，没有问题，我们的目的达到了。后两次的调用直接返回了记忆中的结果。

这就是记忆函数。记忆函数利用闭包，在确保返回结果一定正确的情况下，减少了重复冗余的计算过程。这是我们试图利用记忆函数去优化我们代码的目的所在。

1

react hooks提供的api，大多都有记忆功能。例如

• useState
• useEffect
• useLayoutEffect
• useReducer
• useRef
• useMemo 记忆计算结果
• useCallback 记忆函数体

其他几个api的使用方法，我们在前面已经一一跟大家分析过。这里主要关注useMemo与useCallback。

useMemo

useMemo缓存计算结果。它接收两个参数，第一个参数为计算过程(回调函数，必须返回一个结果)，第二个参数是依赖项(数组)，当依赖项中某一个发生变化，结果将会重新计算。

// allow undefined, but don't make it optional as that is very likely a mistake
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

useCallback

useCallback的使用几乎与useMemo一样，不过useCallback缓存的是一个函数体，当依赖项中的一项发现变化，函数体会重新创建。

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

写一个案例，来观察一下他们的使用。

import React, { useMemo, useState, useCallback } from 'react';
import { Button } from 'antd-mobile';

export default function App() {
  const [target, setTarget] = useState(0);
  const [other, setOther] = useState(0)

  const sum = useMemo(() => {
    console.log('重新计算一次');
    let _sum = 0;
    for (let i = 1; i <= target; i++) {
      _sum += i;
    }
    return _sum;
  }, [target]);

  const inputChange = useCallback((e) => {
    console.log(e.target.value);
  }, []);

  return (
    <div style={{ width: '200px', margin: 'auto' }}>
      <input type="text" onChange={inputChange} />
      <div style={{ width: '80px', margin: '100px auto', fontSize: '40px' }}>{target} {sum}</div>
      <Button onClick={() => setTarget(target + 1)}>递增</Button>
      <Button onClick={() => setTarget(target - 1)}>递减</Button>

      <div style={{ width: '80px', margin: '100px auto', fontSize: '20px' }}>干扰项 {other}</div>
      <Button onClick={() => setOther(other + 1)}>递增</Button>
      <Button onClick={() => setOther(other - 1)}>递减</Button>
    </div>
  )
}

2

useMemo/useCallback的使用非常简单，不过我们需要思考一个问题，使用他们一定能够达到优化的目的吗？

React的学习经常容易陷入过度优化的误区。一些人在得知shouldComponentUpdate能够优化性能，恨不得每个组件都要用一下，不用就感觉自己的组件有问题。useMemo/useCallback也是一样。

明白了记忆函数的原理，我们应该知道，记忆函数并非完全没有代价，我们需要创建闭包，占用更多的内存，用以解决计算上的冗余。

useMemo/useCallback也是一样，这是一种成本上的交换。那么我们在使用时，就必须要思考，这样的交换，到底值不值？

如果不使用useCallback，我们就必须在函数组件内部创建超多的函数，这种情况是不是就一定有性能问题呢？

不是的。

我们知道，一个函数执行完毕之后，就会从函数调用栈中被弹出，里面的内存也会被回收。因此，即使在函数内部创建了多个函数，执行完毕之后，这些创建的函数也都会被释放掉。函数式组件的性能是非常快的。相比class，函数更轻量，也避免了使用高阶组件、renderProps等会造成额外层级的技术。使用合理的情况下，性能几乎不会有什么问题。

而当我们使用useMemo/useCallback时，由于新增了对于闭包的使用，新增了对于依赖项的比较逻辑，因此，盲目使用它们，甚至可能会让你的组件变得更慢。

大多数情况下，这样的交换，并不划算，或者赚得不多。你的组件可能并不需要使用useMemo/useCallback来优化。

3

那么，什么时候使用useMemo/useCallback比较合适？

总的原则，就是当你认为，交换能够赚的时候去使用它们。

例如在一个一定会多次re-render的组件里，input的回调没有任何依赖项，我们就可以使用useCallback来降低多次执行带来的重复创建同样方法的负担。

即使这样，也可能并不会优化多少，因为我们缓存的函数体本身就非常简单，不会造成太大的负担

<input type="text" onChange={inputChange} />

const inputChange = useCallback((e) => {
  setValue(e.target.value);
}, []);

但是，同样的场景，如果该组件一定只会渲染一次，那么使用useCallback就完全没有必要。

通常情况下，当函数体或者结果的计算过程非常复杂时，我们才会考虑优先使用useCallback/useMemo。

例如，在日历组件中，需要根据今天的日期，计算出当月的所有天数以及相关的信息。

不过，当依赖项会频繁变动时，我们也要考虑使用useMemo/useCallback是否划算。

每当依赖项变动，useMemo/useCallback不会直接返回计算结果，这个时候，结果会重新计算，函数体会重新创建。因此依赖项变动频繁时，需要慎重考虑。

最后，一图总结全文。

本系列文章的所有案例，都可以在下面的地址中查看

https://github.com/advance-course/react-hooks

本系列文章为原创，请勿私自转载，转载请务必私信我