react hooks--useMemo

概述

相当于计算属性!!!

useMemo实际的目的也是为了进行性能的优化。

◼ 如何进行性能的优化呢?

 useMemo返回的也是一个 memoized(记忆的) 值;

 在依赖不变的情况下,多次定义的时候,返回的值是相同的;

在类组件中计算属性实现方式如下:

class App extends React.Component {get computedName() {return this.state.name + '计算属性'}render() {return <div></div>}
}

基本用法

语法:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  • 第一个参数是一个函数,在函数内部需要返回一个结果;该回调函数会被调用,并通过返回值指定需要被记住的数据
  • 第二个参数是一个数组(用于指定回调函数中依赖(用到)的数据),即需要监听的属性,一旦监听属性改变后,那么结果就会重新计算,如果没有数组,那么每次组件更新时都会重新计算,比较耗性能,因此在没有依赖项时,建议传入空数组([])
  • 返回值:useMemo 记住的数据
  • useMemo 记住的数据会一直生效(或者说会一直返回同一个数据),直到依赖项发生改变

useCallback:只能记忆函数。而 useMemo可以记忆任何数据

使用场景:类似于 useCallback,可以在组件更新期间保持任意数据引用相等,一般用来处理对象类型的数据useCallback 只能记忆函数,而 useMemo 作用:记忆任意数据,这个被记住的数据会一直生效,直到依赖项发生改变1

如何选择使用哪一个?

  • 如果处理的是函数,推荐使用 useCallback 函数
  • 如果处理的是其他数据(比如,对象),推荐使用 useMemo 函数。

示例:

import React from "react";
import { useMemo, useState } from "react";export default function UseMemo() {let [firstName, setFirstName] = useState("张");let [lastName, setLastName] = useState("三");let fullName = useMemo(() => {return firstName + lastName;}, [firstName, lastName]);return (<div><p> 姓名:{fullName}</p></div>);
}

场景:

  • 进行大量的计算操作,是否有必须要每次渲染时都重新计算
  • 对子组件传递相同内容的对象时,使用useMemo进行性能的优化

模拟useCallback

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

const help = useCallback(() => {setCount(count - 1)
}, [count])// 模拟 useCallback
const help = useMemo(() => {return () => {setCount(count - 1)}
}, [count])

总结

相较于 useCallback 而言,useMemo 的收益是显而易见的。

useMemo 建议适当使用

如果没有使用 useMemo,computeExpensiveValue 会在每一次渲染的时候执行。如果使用了 useMemo,只有在 ab 变化时,才会执行一次 computeExpensiveValue这笔账大家应该都会算,所以我建议 useMemo 可以使用。

当然也不是无节制的使用,在很简单的基础类型计算时,可能 useMemo 并不划算。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0920)

十三、文章分类页面 - [element-plus 表格] Git仓库&#xff1a;https://gitee.com/msyycn/vue3-hei-ma.git 基本架子 - PageContainer 功能需求说明&#xff1a; 基本架子-PageContainer封装文章分类渲染 & loading处理文章分类添加编辑[element-plus弹层]文章分类删除…

k8s中的微服务

目录 一、什么是微服务 二、微服务的类型 三、IPVS模式 1、ipvs模式配置方式 &#xff08;1&#xff09;在所有节点中安装ipvsadm &#xff08;2&#xff09;修改master节点的代理配置 &#xff08;3&#xff09;重启pod 四、微服务类型详解 1、clusterip 示例&#…

Flink提交任务

第3章 Flink部署 3.1 集群角色 3.2 Flink集群搭建 3.2.1 集群启动 0&#xff09;集群规划 表3-1 集群角色分配 具体安装部署步骤如下&#xff1a; 1&#xff09;下载并解压安装包 &#xff08;1&#xff09;下载安装包flink-1.17.0-bin-scala_2.12.tgz&#xff0c;将该jar包…

有什么兼容macOS 15 Sequoia系统的加密软件?

前言&#xff1a;近日&#xff0c;苹果更新了 macOS 15 Sequoia正式版&#xff0c;已经有用户在电脑上安装使用了。在这个信息化时代&#xff0c;系统一直在更新&#xff0c;运用一些工具时需要考虑兼容性。 刚有个客户来问迅软&#xff1a;你们迅软DSE客户端支持新发布的macO…

Linux 磁盘清理重新格式化挂载脚本及问题解决

Linux 磁盘清理重新格式化挂载脚本&#xff1a;diskformat.sh #!/bin/bash for i in {1…8} do umount /data0$i done PIDARRAY() for i in a b c d e f g h do parted -s /dev/sd i m k l a b e l g p t p a r t e d − s / d e v / s d i mklabel gpt parted -s /dev/sd im…

【高阶数据结构】二叉搜索树的插入、删除和查找(精美图解+完整代码)

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《高阶数据结构》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多《高阶数据结构》点击专栏链接查看&a…

【计算机网络篇】计算机网络概述

本文主要介绍计算机网络第一章节的内容&#xff0c;文中的内容是我认为的重点内容&#xff0c;并非所有。参考的教材是谢希仁老师编著的《计算机网络》第8版。跟学视频课为河南科技大学郑瑞娟老师所讲计网。 文章目录 &#x1f3af;一.计算机网络的组成 ✨主要内容 1.边缘部…

seL4 Capabilities(翻自官网)(一)

官网教程链接: Capability 初始化Capabilities tutorials // 先使用repo拉取一下tutorials&#xff0c;然后执行repo sync&#xff0c;所有的教程都在里面&#xff0c;学习某个的时候只需要改变的是 --tut 后面的参数 ./init --tut capabilities # building the tutorial exe…

国内可以使用的ChatGPT服务【9月持续更新】

首先基础知识还是要介绍得~ 一、模型知识&#xff1a; GPT-4o&#xff1a;最新的版本模型&#xff0c;支持视觉等多模态&#xff0c;OpenAI 文档中已经更新了 GPT-4o 的介绍&#xff1a;128k 上下文&#xff0c;训练截止 2023 年 10 月&#xff08;作为对比&#xff0c;GPT-4…

演示:基于WPF的DrawingVisual开发的Chart图表和表格绘制

一、目的&#xff1a;基于WPF的DrawingVisual开发的Chart图表和表格绘制 二、预览 钻井井轨迹表格数据演示示例&#xff08;应用Table布局&#xff0c;模拟井轨迹深度的绘制&#xff09; 饼图表格数据演示示例&#xff08;应用Table布局&#xff0c;模拟多个饼状图组合显示&am…

git使用“保姆级”教程2——初始化及工作机制解释

1、设置用户签名 解释&#xff1a; 签名的作用就是用来&#xff1a;标识用户&#xff0c;以区分不同的开发人员简单来说&#xff1a;用来标识"你是谁"&#xff0c;在提交代码时&#xff0c;会显示提交代码的是谁&#xff0c;把设置的信息一起提交上去 设置&#xff…

weblogic CVE-2019-2725 靶场攻略

漏洞描述 wls9-async等组件为WebLogic Server提供异步通讯服务&#xff0c;默认应⽤于WebLogic部分版本。由于该 WAR包在反序列化处理输⼊信息时存在缺陷&#xff0c;攻击者通过发送精⼼构造的恶意 HTTP 请求&#xff0c;即可获得⽬标服务器的权限&#xff0c;在未授权的情况…

4.使用 VSCode 过程中的英语积累 - View 菜单(每一次重点积累 5 个单词)

前言 学习可以不局限于传统的书籍和课堂&#xff0c;各种生活的元素也都可以做为我们的学习对象&#xff0c;本文将利用 VSCode 页面上的各种英文元素来做英语的积累&#xff0c;如此做有 3 大利 这些软件在我们工作中是时时刻刻接触的&#xff0c;借此做英语积累再合适不过&a…

Codeforces Round 973 (Div. 2) F1. Game in Tree (Easy Version)(思维题 博弈)

题目 思路来源 乱搞ac 题解 两个人的策略是一样的&#xff0c;把1到u的路径标记&#xff0c; 如果能走旁边的链&#xff08;也就是当前点&#xff0c;刨去标记链以外的子树中最长的链&#xff09;&#xff0c; 使得对面走剩余的连通块无法比你大&#xff0c;就走旁边的链&…

【计算机网络】网络层协议解析

网络层的两种服务IPv4分类编址划分子网无分类地址 IPv4地址应用IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报 IPv4数据报首部格式ICMP网际控制报文协议虚拟专用网VPN与网络地址转换NAT 网络层主要任务是实现网络互连&#xff0c;进而实现数据包在各网络之间的传…

充电桩项目:前端实现

上次基于VueElement plus实现了充电桩项目后台管理系统的基本架子。 后端管理 员工管理 这次&#xff0c;又把用户端的基本架子搭建完毕&#xff1a;VueVant 首页 个人中心 充值 选择充值方式 优惠券中心 已过期优惠券 用户登录 用户注册 慢慢项目就有点样子了&#xff0c;代码…

远程桌面连接工具Microsoft Remote Desktop Beta for Mac

Microsoft Remote Desktop Beta for Mac 是一款功能强大的远程桌面连接工具&#xff0c;具有以下功能特点&#xff1a; 软件下载地址 跨平台连接&#xff1a; 允许 Mac 用户轻松连接到运行 Windows 操作系统的计算机&#xff0c;打破了操作系统的界限&#xff0c;无论这些 Wi…

Shiro-550—漏洞分析(CVE-2016-4437)

文章目录 漏洞原理源码分析加密过程解密过程 漏洞复现 漏洞原理 Shiro-550(CVE-2016-4437)反序列化漏洞 在调试cookie加密过程的时候发现开发者将AES用来加密的密钥硬编码了&#xff0c;并且所以导致我们拿到密钥后可以精心构造恶意payload替换cookie&#xff0c;然后让后台最…

基于无人机影像的可见光单木分割数据集-json格式

基于无人机影像的可见光单木分割数据集&#xff0c;共1700张影像&#xff0c;数据集大小3.6GB&#xff0c;分割标注采用标准json格式。 该数据集是一个专门用于基于无人机可见光影像进行单木分割的数据集&#xff0c;旨在帮助研究人员和开发者训练和评估基于深度学习的图像分割…

EndNoteX9快捷插入引用文献的教程以及出现的一些问题的解决方法(一)

使用EndNote向Word文档中插入引用文献时报错如图1所示&#xff1a; 解决方法为&#xff1a; 采用管理员身份运行Word与EndNote软件 当电脑中安装好Word与EndNote两款软件之后如何在Word中快速插入引用文献 &#xff08;一&#xff09;直接打开Word如图2&#xff0c;3&#x…