React Hooks - useMemo 讲解及使用场景

前言

如果你看过前面的useCallback文章或者你已经会使用了，那么这篇useMemo文章就会变得很简单，因为它两都是为了避免函数组件在更新值时重复创建问题。使用方式也都是差不多的。

useMemo

useMemo 的应用场景通常是在需要进行昂贵的计算或者运算量较大的逻辑处理时。比如，对于某些计算结果较为耗时的操作，我们可以使用 useMemo将计算结果缓存起来，避免重复计算,只在依赖项发生变化时重新计算。

场景假设：计算桃子和香蕉的总价格

不使用 useMemo 计算值遇到的问题

import React, { useState } from "react";

function App() {

  const [introduction, setIntroduction] = useState("店长很懒什么都没写...")

  // 桃子的单价和价格
  const [peach, setPeach] = useState({
    num: 15,
    unitPrice: 5
  });

  // 香蕉的单价和价格
  const [banana, setBanana] = useState({
    num: 26,
    unitPrice: 10
  });

  // 1. 为了计算总的价格你可能会这样写
  const price = (peach.num * peach.unitPrice) + (banana.num * banana.unitPrice)

  // 2. 还可能这样 在下面的dom中调用
  // const price = () => {
  // return (peach.num * peach.unitPrice) + (banana.num * banana.unitPrice)
  // }

  const change = () => {
    setIntroduction("这是一家水果店")
  }

  return (
    <div>
      <h3 onClick={change}>店铺简介：{introduction}</h3>

      <h4>  桃子数量: {peach.num}  单价：{peach.unitPrice}元 </h4>
      <h4>  香蕉数量: {banana.num} 单价：{banana.unitPrice}元 </h4>

      价格：{price}元

      {/* 2. 价格：{price()}元 */}

      {/* 3. 还能这 !!!
         价格：{(peach.num * peach.unitPrice) + (banana.num * banana.unitPrice)}元 
      */}

    </div>
  );
}

过程

• 在上面的案例中我们设想一下，当我们去更新简介（introduction）的时候整个函数App 函数都会执行一次以保证 return 最新视图。但是当它执行的时候文中的 1，2，3 ，3种方法也都会重新执行一次也就是重新计算。

问题

• 案例中的计算量算小问题不大，那如果是计算量较大每次更新都需要大量计算那界面的呈现时间就卡顿了

期望

• 我们只希望它在水果数据的时候重计算价格就好了，其它时候我们不希望它执行。那么 useMemo 的诞生就是为了这。

使用 useMemo 优化计算

import React, { useState } from "react";

function App() {

  const [introduction, setIntroduction] = useState("店长很懒什么都没写...")

  // 桃子的单价和价格
  const [peach, setPeach] = useState({
    num: 15,
    unitPrice: 5
  });

  // 香蕉的单价和价格
  const [banana, setBanana] = useState({
    num: 26,
    unitPrice: 10
  });

  const change = () => { setIntroduction("这是一家水果店") }

  const price = useMemo(()=>{

    return (peach.num * peach.unitPrice) + (banana.num * banana.unitPrice)

  },[peach,banana])


  return (
    <div>
      <h3 onClick={change}>店铺简介：{introduction}</h3>

      <h4>  桃子数量: {peach.num}  单价：{peach.unitPrice}元 </h4>
      <h4>  香蕉数量: {banana.num} 单价：{banana.unitPrice}元 </h4>

      价格：{price}元

    </div>
  );
}

这样就好了。useMemo 会帮我们把这次的计算结果给缓存下来，当你改变其他（introduction）状态时，useMemo发现依赖没有变动它就会从缓存里取值而不会重新计算，只有在你添加的依赖改变时它才会取重新计算重新缓存新的值

最后

其实 useMemo 和 Vue 中的计算属性是一样，都会将一个复杂计算的值给缓存。Vue 自动锁定依赖不需要你填写，React 把指定交给你来写。

小说一句

useCallback：

cosnt func = useCallback(()=>{ },[])

useMemo：

cosnt final = useMemo(()=>{ },[])

useEffect：

 useEffect(()=>{ },[])

相同点：

它们第一个参数都是一个函数，第二个参数是一个数组可以添加多个依赖，依赖改变时（基本数据类型：值改变，引用数据类型：地址改变）就会执行第一个参数的函数。

不同点：

useCallBack - 需要返回一个函数 useMemo - 需要返回会值 useEffect - 多种不同的使用方法代表不同的含义