超性感的React Hooks(十一)useCallback、useMemo

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

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

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

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

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

超性感的React Hooks(十一)useCallback、useMemo_第1张图片

这个时候,我们思考一个问题,当我们重复调用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),没有问题,我们的目的达到了。后两次的调用直接返回了记忆中的结果。
超性感的React Hooks(十一)useCallback、useMemo_第2张图片

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

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不会直接返回计算结果,这个时候,结果会重新计算,函数体会重新创建。因此依赖项变动频繁时,需要慎重考虑。

最后,一图总结全文。

超性感的React Hooks(十一)useCallback、useMemo_第3张图片

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

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

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

你可能感兴趣的:(冲吧React)