我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

react项目的函数式组件中，有很多useXxx系列函数，每个函数都有其特殊的作用。本文描述useMemo函数，它是用来缓存函数的执行结果的，效果就是：可以不执行函数计算直接拿到上次的缓存结果。

苏南大叔：react教程，如何使用useMemo缓存函数运算结果？ - react-usememo缓存-hero
react教程，如何使用useMemo缓存函数运算结果？（图4-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述react函数式组件的useMemo函数。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

useMemo

useMemo函数：

  • 第一个参数：()=> value，没有形参，返回一个value。
  • 第二个参数：依赖[m,n]。只有当依赖变化时,才会计算新的value。
let aa = useMemo(()=>{
  return value;
},[m,n]);
JavaScript

测试代码

使用useMemo的代码范例，如下：

import React, { useState, useMemo } from 'react';
function Child(props) {
  let [info, setinfo] = useState({
    name: '苏南大叔',
    city: 'beijing'
  })
  function getCity(city) {
    console.log('getCity');
    return city === 'beijing' ? '北京' : '唐山';
  }
  let city = getCity(info.city);
  let status = useMemo((_useless) => {
    console.log('getStatus', _useless); // undefined
    return city === '北京' ? '在京' : '京外';
  }, [info.city]);
  return (
    <>
      <div>
        {info.name}在{city}，所以状态为{status} <br />
        <button onClick={() => {
          let name1 = (info.name == "sunan大叔") ? "苏南大叔" : "sunan大叔";
          setinfo({ ...info, name: name1 })
        }}> 修改姓名，触发位置判断，在京状态无判断 </button>
        <br />
        <button onClick={() => {
          let city = (info.city == "beijing") ? "tangshan" : "beijing";
          setinfo({ ...info, city: city })
        }}> 修改位置，触发位置判断，在京状态有判断 </button>
      </div>
    </>
  )
}
export default Child;
JavaScript

苏南大叔：react教程，如何使用useMemo缓存函数运算结果？ - usememo-status
react教程，如何使用useMemo缓存函数运算结果？（图4-2）

在这个代码中，定义了一个普通变量，具有两个属性name和city。

  • 变量city来自：函数一getCity()，根据city拼音来返city的中文名字。
  • 变量status来自：函数二（使用useMemo的匿名函数），只有依赖项没有发生变化，就不会重新计算返回值。

运行结果

输出的代码逻辑为：

{info.name}在【{city}】，所以状态为【{status}】
JavaScript

注意：被useMemo的getStatus函数的依赖项目为info.city，只有info.city被修改后，getStatus函数才会被重新计算。

第一步，初始化

上述代码初始预算值为：

苏南大叔在【北京】，所以状态为【在京】
Plain text

console的默认输出值为：

getCity
getStatus undefined
Plain text

可见，两个函数都被执行了。

第二步，点击第一个按钮

按钮一修改了info状态的name属性，并没有修改info.city。所以，city变量重新计算了（输出getCity）。而status变量是useMemo的，依赖项目info.city没有发生变化，所以没有重新计算输出值（没有输出getStatus）。

sunan大叔在【北京】，所以状态为【在京】
Plain text

因为只执行了没有用到usememo的getCity()函数，所以console的输出值为：

getCity
Plain text

苏南大叔：react教程，如何使用useMemo缓存函数运算结果？ - 修改姓名-判断位置
react教程，如何使用useMemo缓存函数运算结果？（图4-3）

第三步，点击第二个按钮

按钮二修改了info状态的city属性，所以city变量和status变量都重新计算了，输出getCity和getStatus。

sunan大叔在【唐山】，所以状态为【京外】
Plain text

因为也执行了用到usememo的getStatus()函数，所以console的输出值为：

getCity
getStatus undefined
Plain text

苏南大叔：react教程，如何使用useMemo缓存函数运算结果？ - 修改姓名-判断状态
react教程，如何使用useMemo缓存函数运算结果？（图4-4）

useMemo对比memo

  • useMemo是个用于函数式组件的缓存函数。
  • memo主要用于缓存组件本身的（虽然主要用于函数式组件，但是也可以用于类组件），类似于类组件的PureComponent。

相关文章

结束语

更多react经验文章，请点击苏南大叔的经验文章：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react