React（四）memo、useCallback、useMemo Hook

目录

(一)memo API

1.先想一个情景

2.用法

(1)props传入普通数据类型的情况 

(2)props传入对象的情况

(3)props传入函数的情况

(4)使用自定义比较函数

3.什么时候使用memo？

(二)useMemo Hook

1.用法

2.useMemo实现组件记忆化 

3.useMemo实现函数记忆化

(三)useCallback Hook

1.用法

(四)总结

(一)memo API

memo – React 中文文档

1.先想一个情景

function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('csq')
  return (
    <>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
      <Name name={name}></Name>
    </>
  )
}

function Name(props){
  console.log('Name组件重新渲染了');
  return (
    <div>{props.name}</div>
  )
}

点击按钮count改变后，整个App组件会重新渲染，即使Name组件的props没有改变，Name组件也被重新渲染了

如果一个过于复杂的组件的props没有改变，那么重新渲染它会增加渲染负担；

通常情况下，只要该组件的 props 没有改变，这个记忆化版本就不会在其父组件重新渲染时重新渲染。这就称之为记忆化，是一种性能优化的办法

因此，memo api的作用就体现出来了：

memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。 

2.用法

const xxx = memo(function xxx(props){...}, arePropsEqual?) 

将需要进行记忆化的组件用memo包裹起来，通过arePropsEqual函数判断props是否变化（可自定义，不写就默认使用Object.is()判断），然后返回新的react组件

(1)props传入普通数据类型的情况 

import { memo } from 'react'
// 使用memo
function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('csq')
  return (
    <>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
      <Name name={name}></Name>
    </>
  )
}

// 不传入arePropsEqual函数就默认用Object.is判断
const Name = memo(function Name(props){
  console.log('Name组件重新渲染了');
  return (
    <div>{props.name}</div>
  )
})

这样一来，Name组件在父组件重新渲染的时候就不会跟着渲染啦

(2)props传入对象的情况

上面提到了，不自定义比较函数的话，memo采用Object.is()方法来比较props是否变化

但是！Object.is()只能比较浅层数据是否变化，如果对复杂数据类型进行比较会发现：

结果为false！这表明了传入复杂数据类型的prop仍会导致memo组件重新渲染 

import { memo } from 'react'
// 使用memo
function App() {
  const [count, setCount] = useState(0)
  return (
    <>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
      <Name data={{name:'csq'}}></Name>
    </>
  )
}
// 不传入arePropsEqual函数就默认用Object.is判断
const Name = memo(function Name(props){
  console.log('Name组件重新渲染了',props);
  return (
    <div>{props.data.name}</div>
  )
})

重新渲染了又 

如何避免？ 

为了最大化使用 memo 的效果，应该尽量减少 props 的变化次数 

  1. 最小化props：将对象拆分开再传
  2. 使用useMemo Hook（后面会讲到）
  3. 指定自定义比较函数（后面会讲到）

(3)props传入函数的情况

函数也是复杂数据类型中的一种，所以传入的就算是同一个函数，父组件的重新渲染也会引起记忆化的组件重新渲染，这样memo就失效了！

针对props传入的函数，就要采用另一个Hook：useCallback 来实现组件的记忆化，后面第三节就会讲到了

(4)使用自定义比较函数

一定要确保使用比较函数的时间比重新渲染要快，不然写个比较函数还浪费那么久时间简直白白干了

const Chart = memo(function Chart({ dataPoints }) {
  // ...
}, arePropsEqual);

function arePropsEqual(oldProps, newProps) {
  return (
    oldProps.dataPoints.length === newProps.dataPoints.length &&
    oldProps.dataPoints.every((oldPoint, index) => {
      const newPoint = newProps.dataPoints[index];
      return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y;
    })
  );
}

注意：比较函数内一定要将props的所有prop都比较到，包括函数。

避免在 arePropsEqual 中进行深比较，除非你 100％ 确定你正在处理的数据结构具有已知有限的深度。深比较可能会变得非常缓慢，并且如果有人稍后更改数据结构，这可能会卡住你的应用数秒钟。

简而言之就是少用，有那个功夫用用hook肯定更快啦 

3.什么时候使用memo？

memo api并不是是个组件就给安上的，首先要考虑到组件的重新渲染对页面会不会造成影响，比如有动画的组件：重新渲染会导致动画重新播放，如果不想变化的话就加个memo

如果组件的重新渲染没有什么延迟，当然也不需要用memo 

(二)useMemo Hook

useMemo – React 中文文档

useMemo 能在每次重新渲染的时候能够缓存计算的结果。

1.用法

useMemo(calculateValue, dependencies) 

  • calculateValue：要缓存计算值的函数。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。

  • dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。React 使用 Object.is 将每个依赖项与其之前的值进行比较。 

举例：用counterFilter模拟运行时间长的函数，每次点击todo长度加1按钮都会等待0.5s

不使用useMemo的话，即使len不发生改变，count发生改变时，也会重新渲染运行counterFilter

使用useMemo()后，当len发生改变时，才会重新计算todoSlice的值，而点击count+1按钮不会造成卡顿

import { useState, useMemo } from 'react'
function App() {
  const [count,setCount] = useState(1)
  const [len, setLen] = useState(2)
  // 这里todos是个数组，也过不了Object.is()，所以套一层useMemo
  const todos = useMemo(()=>([1, 2, 3, 4, 5, 6, 7, 8, 9]),[])
  const todoSlice = useMemo(() => counterFilter(todos, len),[todos, len])
  return (
    <>
      <button onClick={() => { setLen(len + 1) }}>todo长度加1</button>
      <button onClick={() => { setCount(count + 1) }}>count加1</button>
      {
        todoSlice.map(value => (
              <p key={value}>todo: {value}</p>
            ))
      }
      <Counter count={count}></Counter>
    </>
  )
}

const Counter = function Name(props) {
  return (
    <div>{props.count}</div>
  )
}

function counterFilter(todos, length) {
  let startTime = performance.now();
  while (performance.now() - startTime < 500) {
    // 在 500 毫秒内不执行任何操作以模拟极慢的代码
  }
  return todos.filter((value, index) => index < length)
}

这样一用，哎哟这不是vue的计算属性嘛，蛮有意思蛮有意思

不过useMemo Hook设计来是用于存储运算时间长的计算结果以避免重复渲染的一种优化手段（我自认为是这样）

2.useMemo实现组件记忆化 

提到避免重复渲染，useMemo可以结合上文的memo api实现记忆化，解决props传入对象破环记忆化的情况

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

3.useMemo实现函数记忆化

函数也是一种对象，所以当然能用useMemo实现记忆化 

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

这样看起来蠢蠢的，函数又套函数！

术业有专攻，记忆函数要使用react专门提供的一个hook，也就是下面要讲到的

(三)useCallback Hook

useCallback – React 中文文档

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。 

1.用法

const cachedFn = useCallback(fn, dependencies)

用法和useMemo一样，传入两个参数

  • fn：想要缓存的函数。React 将会在初次渲染而非调用时返回该函数。当进行下一次渲染时，如果 dependencies 相比于上一次渲染时没有改变，那么 React 将会返回相同的函数。否则，React 将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。React 不会调用此函数，而是返回此函数。你可以自己决定何时调用以及是否调用。

  • dependencies：有关是否更新 fn 的所有响应式值的一个列表。响应式值包括 props、state，和所有在你组件内部直接声明的变量和函数。

  • 返回值：返回想要缓存的函数。

还是用memo那儿的例子：

函数setName本质是对象，即使传入的函数没有改变，Object.is()判断也是false，这样就导致memo失去了记忆化

function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('csq')
  return (
    <>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
      <Name name={name} setName={(name)=>{setName(name)}}></Name>
    </>
  )
}

const Name = memo(function Name(props){
  console.log('Name组件重新渲染了');
  return (
    <>
      <div>{props.name}</div>
      <button onClick={() => { props.setName(props.name+'!') }}>修改名字</button>
    </>
  )
})

直接上useCallback！

这个useCallback里的依赖数组为空，是因为setName这个函数本身就是不变的，不受变量影响

import { useState, memo, useCallback } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('csq')
  const setNameCallback = useCallback((name) => { setName(name) },[])
  return (
    <>
      <div>{count}</div>
      <button onClick={()=>{setCount(count+1)}}>加1</button>
      <Name name={name} setName={setNameCallback}></Name>
    </>
  )
}

const Name = memo(function Name(props){
  console.log('Name组件重新渲染了');
  return (
    <>
      <div>{props.name}</div>
      <button onClick={() => { props.setName(props.name+'!') }}>修改名字</button>
    </>
  )
})

(四)总结

今天学了memo、useMemo、useCallback，感觉花太多时间在memo上了，后面两个hook就写的稍微有点水，有点漏洞

以后应该多花点时间在敲代码上，感觉写博客写太久了

memo：用于实现组件记忆化，如果props传递的是对象，那么memo就没意义了

useMemo：立即执行函数返回结果并保存。可以和memo结合使用，传递props不变则不重新渲染；也可以用于存储较花费事件的数据；

useCallback：和memo结合使用，是保存函数但不会执行。

总结来说都是用于性能优化， 不能依靠这些来避免本身代码的问题

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/660349.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

dbserver 软件 展示 全部模式库

dbserver 软件 展示 全部模式库

目录 1 问题2 实现 1 问题 dbserver 软件 展示 全部模式库 2 实现 以上就可以了
阅读更多...
Vue——事件修饰符

Vue——事件修饰符

文章目录 前言阻止默认事件 prevent阻止事件冒泡 stop 前言 在官方文档中对于事件修饰符有一个很好的说明&#xff0c;本篇文章主要记录验证测试的案例。 官方文档 事件修饰符 阻止默认事件 prevent 在js原生的语言中&#xff0c;可以根据标签本身的事件对象进行阻止默认事件…
阅读更多...
从零到一建设数据中台 - 数据可视化

从零到一建设数据中台 - 数据可视化

从零到一建设数据中台（八）- 数据可视化 一、数据可视化大屏 数据可视化是借助于图形化手段，清晰有效地传达与沟通信息。 将一些业务的关键指标通过数据可视化的方式展示到一块或多块LED大屏上，以大屏为主要展示载体的数据可视化设计。 在数据可视化大屏构建过程中，为了…
阅读更多...
对红黑树、跳表、B+树的一些理解

对红黑树、跳表、B+树的一些理解

文章目录 红黑树应用场景 跳表使用场景 B树使用场景 毫无疑问数据结构是复杂的&#xff0c;让人头大的&#xff0c;大学时唯一挂科的就是数据结构&#xff0c;上学时不用心&#xff0c;不晓得自己的职业生涯要一直被数据结构支配。 或多或少&#xff0c;面试抱佛脚时&#xff0…
阅读更多...
如何做好投入式水位计的安装与维护

如何做好投入式水位计的安装与维护

投入式水位计是一种广泛应用于各种环境和水位监测场景的精确测量设备。为了确保其长期稳定运行和测量准确性&#xff0c;正确的安装和维护至关重要。本文将详细介绍投入式水位计的安装步骤和注意事项&#xff0c;以及维护过程中的关键要点。 一、投入式水位计的安装 准备工作&a…
阅读更多...
探索AI去衣技术中的反射应用

探索AI去衣技术中的反射应用

在当今数字时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的飞速发展已经渗透到了我们生活的方方面面。其中&#xff0c;图像处理和计算机视觉作为AI的重要分支&#xff0c;正不断推动着创新应用的边界。今天&#xff0c;我们要探讨的是一个颇具争议但又技术上颇为有…
阅读更多...
【2024最新华为OD-C卷试题汇总】披萨大作战 (100分) - 支持在线评测+三语言AC题解(Python/Java/Cpp)

【2024最新华为OD-C卷试题汇总】披萨大作战 (100分) - 支持在线评测+三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 前…
阅读更多...
若依+vue框架使用字典下拉框回显错误

若依+vue框架使用字典下拉框回显错误

【版权所有&#xff0c;文章允许转载&#xff0c;但须以链接方式注明源地址&#xff0c;否则追究法律责任】【创作不易&#xff0c;点个赞就是对我最大的支持】 前言 仅作为学习笔记&#xff0c;供大家参考 总结的不错的话&#xff0c;记得点赞收藏关注哦&#xff01; 目录 …
阅读更多...
面试：eureka、nacos、consul的区别

面试：eureka、nacos、consul的区别

配置中心 配置中心eureka不支持nacos支持 用起来简单&#xff0c;符合springBoot的命名风格&#xff0c;支持动态刷新consul支持 但用起来偏麻烦&#xff0c;不太符合springBoot框架的命名风格&#xff0c;支持动态刷新 注册中心
阅读更多...
电流继电器DL-13 柜内安装带板前接线附件 JOSEF约瑟

电流继电器DL-13 柜内安装带板前接线附件 JOSEF约瑟

DL-10系列电流继电器板前接线为电磁式瞬动过电流继电器&#xff0c;它广泛用于电力系统二次回路继电保护装置线路中&#xff0c;作为过电流启动元件。 系列型号 DL-11电流继电器; DL-12电流继电器; DL-13电流继电器&#xff1b; 一、应用范围 DL-13/2电流继电器 板前接线为…
阅读更多...
一文看懂！电磁仿真软件CST Studio Suite的技术发展历程

一文看懂！电磁仿真软件CST Studio Suite的技术发展历程

CST工作套件室是一款功能强大、专业级别的软件包&#xff0c;用于进行微波无源器件和天线的仿真分析和设计。它支持的应用领域包括耦合器、滤波器、环流器、隔离器、谐振腔、平面结构、连接器、电磁兼容、集成电路封装以及各种类型的天线和天线阵列。该软件可以提供必要的S参数…
阅读更多...
polarctf靶场[reverse]shell、PE结构、拼接

polarctf靶场[reverse]shell、PE结构、拼接

[reverse]shell 考点&#xff1a;脱壳 将所解压的文件拖入DIE有无有壳&#xff0c;文件类型 发现有UPX壳&#xff0c;是32位的文件&#xff0c;先脱壳 用FFI工具脱壳 将脱壳后的程序用32位IDA进行反汇编 点开_main_0函数进行查看 看到flag&#xff0c;&#xff08;F5&#…
阅读更多...
开源DMS文档管理系统 Nuxeo Vs Alfresco对比及 API 使用概述

开源DMS文档管理系统 Nuxeo Vs Alfresco对比及 API 使用概述

1. 文档管理系统是什么 文档管理系统&#xff08;DMS&#xff1a;Document Management System&#xff09;是一种软件系统&#xff0c;用于组织、存储、检索和管理电子文档和文件。这些文件可以是各种格式的电子文档&#xff0c;如文本文档、电子表格、图像、音频或视频文件等…
阅读更多...
Vue3实战笔记（50）—Vue 3+ECharts还能看股票？附源码

Vue3实战笔记（50）—Vue 3+ECharts还能看股票？附源码

文章目录 前言一、改进之前的封装echarts组件二、封装股票k线图总结 前言 今天封装股票k线图组件 前几天学的几个知识点都有用到&#xff0c;都是在封装k线图的时候遇到的问题&#xff0c;又啃了一遍基础。 一、改进之前的封装echarts组件 使用ref对象方式封装useEChartsRef.t…
阅读更多...
端到端目标检测 |从DETR 到 GroundingDINO

端到端目标检测 |从DETR 到 GroundingDINO

文章目录 一&#xff0c;DETR1. 简介2. 亮点3. 细节4. 总结一下 二&#xff0c;GroundingDINOGrounding DINO的整体流程Grounding DINO的目标函数 一&#xff0c;DETR 之前的目标检测框架&#xff0c;需要很多的人工干预&#xff0c;很多的先验知识&#xff0c;而且可能还需要…
阅读更多...
从简单到复杂，红酒配餐的层次感与变化

从简单到复杂，红酒配餐的层次感与变化

红酒配餐是一种艺术&#xff0c;通过不同层次的搭配&#xff0c;可以呈现出丰富的味觉变化&#xff0c;使每一口都充满惊喜。云仓酒庄雷盛红酒以其卓着的品质和与众不同的口感&#xff0c;为红酒配餐提供了无限可能。从简单到复杂&#xff0c;红酒配餐的层次感与变化如下&#…
阅读更多...
这几个素材网站，是B站up主的剪辑素材宝藏库！

这几个素材网站，是B站up主的剪辑素材宝藏库！

1.Videvo 这是一个提供完全免费的视频的网站&#xff0c;主要收集互联网免费的视频片段 网站目前收录了超过2700部高清短片&#xff0c;并且每周都会更新 2.电影预告片资源网——预告片世界 预告片世界是一个个人网站&#xff0c;为粉丝提供最新的高清电影预告片资源的在线观…
阅读更多...
ThingsBoard物联网网关在智慧城市数据采集中的应用

ThingsBoard物联网网关在智慧城市数据采集中的应用

智慧城市由监控中心、采集网关、前端采集设备、前端感应执行器组成。 为何选用ThingsBoard作为平台 监控中心为物联网平台&#xff0c;该平台包含云计算、大数据、人工智能、物联网、GIS、云安全等主要模块&#xff0c;具备数据采集、数据交换、超大规模计算、数据分析、数据应…
阅读更多...
地理信息系统（GIS）软件的最新进展

地理信息系统（GIS）软件的最新进展

在数字化转型的浪潮中&#xff0c;地理信息系统&#xff08;GIS&#xff09;作为连接现实与数字世界的桥梁&#xff0c;其软件和技术的每一次迭代升级都在推动着空间信息处理和分析能力的飞跃。作为地理信息与遥感领域的探索者&#xff0c;本文将带您深入了解GIS软件的最新进展…
阅读更多...
任务3.1：采用面向对象方式求三角形面积

任务3.1：采用面向对象方式求三角形面积

面向对象编程&#xff08;OOP&#xff09;是一种将现实世界中的实体抽象为对象&#xff0c;并通过类和对象来模拟现实世界中的行为和属性的编程范式。在本实战任务中&#xff0c;我们通过创建一个Triangle类来模拟现实世界中的三角形&#xff0c;并使用面向对象的方法来求解三角…
阅读更多...
最新文章

Copyright @ 2022~2023