React Hooks - useMemo

简介

useMemo是一个React钩子，用来记忆函数的输出。useMemo接受两个参数：一个函数和一个依赖列表。useMemo将调用该函数并返回其返回值。

应用场景

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

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

import React, { useState } from "react";

function App() {

  const [introduction, setIntroduction] = useState("引号水果小卖部...")

  // 苹果的单价和价格
  const [apple, setApple] = useState({
    num: 15,
    unitPrice: 5
  });

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

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

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

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

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

      <h4>  苹果数量: {apple.num}  单价：{apple.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 ，三种方法也都会重新执行一次也就是重新计算。
因此暴露出的问题：案例中的计算量算小问题不大，那如果是计算量较大每次更新都需要大量计算那界面的呈现时间就卡顿了

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

使用 useMemo 优化计算

import React, { useState } from "react";

function App() {

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

  // 苹果的单价和价格
  const [apple, setApple] = useState({
    num: 15,
    unitPrice: 5
  });

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

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

  const price = useMemo(()=>{

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

  },[peach,banana])


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

      <h4>  苹果数量: {apple.num}  单价：{apple.unitPrice}元 </h4>
      <h4>  香蕉数量: {banana.num} 单价：{banana.unitPrice}元 </h4>

      价格：{price}元

    </div>
  );
}

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