React Hooks小记(九)_useMemo 和 memo 函数

useMemo 和 memo 函数

1. memo 函数

当父组件被重新渲染的时候,也会触发子组件的重新渲染,这样就多出了无意义的性能开销。如果子组件的状态没有发生变化,则子组件是必须要被重新渲染的。

在 React 中,我们可以使用 React.memo() 函数来解决上述的问题,从而达到提高性能的目的。

React.memo() 的语法格式如下:

const 组件 = React.memo(函数式组件)

例如,在下面的代码中,父组件声明了 count 和 flag 两个状态,子组件依赖于父组件通过 props 传递的 num。当父组件修改 flag 的值时,会导致子组件的重新渲染:

import React, { useEffect, useState } from 'react'// 父组件
export const Father: React.FC = () => {// 定义 count 和 flag 两个状态const [count, setCount] = useState(0)const [flag, setFlag] = useState(false)return (<><h1>父组件</h1><p>count 的值是:{count}</p><p>flag 的值是:{String(flag)}</p><button onClick={() => setCount((prev) => prev + 1)}>+1</button><button onClick={() => setFlag((prev) => !prev)}>Toggle</button><hr /><Son num={count} /></>)
}// 子组件:依赖于父组件通过 props 传递进来的 num
export const Son: React.FC<{ num: number }> = ({ num }) => {useEffect(() => {console.log('触发了子组件的渲染')})return (<><h3>子组件 {num}</h3></>)
}

【解决方案】我们使用 React.memo(函数式组件) 将子组件包裹起来,只有子组件依赖的 props 发生变化的时候,才会触发子组件的重新渲染。示例代码如下:

// 子组件:依赖于父组件通过 props 传递进来的 num
export const Son: React.FC<{ num: number }> = React.memo(({ num }) => {useEffect(() => {console.log('触发了子组件的渲染')})return (<><h3>子组件 --- {num}</h3></>)
})

2. useMemo - 问题引入

进一步改造前面的案例:我们希望在 Father 组件中添加一个“计算属性”,根据 flag 值的真假,动态返回一段文本内容,并把计算的结果显示到页面上。示例代码如下:

// 父组件
export const Father: React.FC = () => {// 定义 count 和 flag 两个状态const [count, setCount] = useState(0)const [flag, setFlag] = useState(false)// 根据布尔值进行计算,动态返回内容const tips = () => {console.log('触发了 tips 的重新计算')   // 我们希望只有 flag 的变化 ,才会导致函数重新计算(结果)return flag ? <p>哪里贵了,不要睁着眼瞎说好不好</p> : <p>这些年有没有努力工作,工资涨没涨</p>}return (<><h1>父组件</h1><p>count 的值是:{count}</p><p>flag 的值是:{String(flag)}</p>// 通过函数执行触发动态渲染{tips()}<button onClick={() => setCount((prev) => prev + 1)}>+1</button><button onClick={() => setFlag((prev) => !prev)}>Toggle</button><hr /><Son num={count} /></>)
}

代码编写完毕后,我们点击父组件中的 +1 按钮,发现 count 在自增,而 flag 的值不会发生变化。此时也会触发 tips 函数的重新执行,这就造成了性能的浪费。

我们希望如果 flag 没有发生变化,则避免 tips 函数的重新计算,从而优化性能。此时需要用到 React Hooks 提供的 useMemo API。

3. useMemo - 语法格式

useMemo作用是对函数计算结果进行缓存,返回值是一个数值,语法格式如下:

const memorizedValue = useMemo(callback, array)// 【注意】 useMemo的返回值是一个值,使用时不需要加()
const memoValue = useMemo(() => {return 计算得到的值
}, [value]) // 表示监听 value 的变化

其中:

1. callback:这是一个函数,用户处理计算的逻辑,必须使用 return 返回计算的结果

2. array:这个数组中存储的是依赖项,只有依赖项发生变化,都会触发 callback 的重新执行。

使用 array 需要注意以下3点:

​ 1、不传数组,每次更新都会重新计算

​ 2、空数组,只会计算一次

​ 3、依赖对应的值,对应的值发生变化时会重新执行 callback

4. useMemo - 使用 useMemo 解决刚才的问题

导入 useMemo:

import React, { useEffect, useState, useMemo } from 'react'

在 Father 组件中,使用 useMemo 对 tips 进行改造:

// 根据布尔值进行计算,动态返回内容
const tips = useMemo(() => {console.log('触发了 tips 的重新计算')return flag ? <p>哪里贵了,不要睁着眼瞎说好不好</p> : <p>这些年有没有努力工作,工资涨没涨</p>
}, [flag])return (<>// 此时这里直接写变量名 tips{tips}</>)

此时,点击 Father 中的 +1 按钮,并不会触发 tips 的重新计算,而是会使用上一次缓存的值进行渲染。只有依赖项 flag 变化时,才会触发 tips 的重新计算。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s及常用对象简介

文章目录 一、k8s是什么应用程序早期部署形式容器的引入k8s的作用 二、k8s中的常用对象1、Node获取node信息 2、Namespacenamespace的使用 3、Pod生命周期pod的使用 4、DaemonSetDaemonSet的使用 5、Deployment创建deploy 6、ReplicaSet7、StatefulSet创建StatefulSet 8、更新操…

免费代理池,在线公共ip池

这些公共代理是完全免费提供的&#xff0c;不需要任何授权。 免费代理通常是开放的、流行的公共代理。 与私人代理不同&#xff0c;公共代理不需要注册或密码。事实上&#xff0c;它们是负责安装在计算机上的代理服务器并且不关心更改默认设置的系统管理员的错误或疏忽。因此&…

道路救援入驻派单小程序开源版开发

道路救援入驻派单小程序开源版开发 1、用户立即救援 2、后台收到救援通知&#xff0c;派单救援师傅. 道路救援入驻派单小程序通常会包含一系列功能&#xff0c;旨在方便救援服务提供商、用户和后台管理系统之间的交互。以下是一个可能的功能列表&#xff1a; 用户端功能&…

GPOPS-II教程(4): 多级火箭上升最优控制问题

文章目录 本篇重点问题描述动力学方程约束条件性能指标 GPOPS代码main function1. 初始参数设置2. 边界条件设置3.初值猜测4.设置GPOPS求解器参数5.求解6.画图 continuous function1. 取输入参数2. 计算过程变量3. 写动力学方程4. 给输出 endpoint function坐标转换函数位置-速…

大猫咪守护LoRA:定制你的大猫私人大猫咪宠物写真合影,某音某书流行款

&#x1f339;大家好&#xff01;我是安琪&#xff01;感谢大家的支持与鼓励。 大猫咪LoRA模型简介 今天应群里同学大猫咪宠物合影写真提议&#xff0c;为大家介绍一款来自作者 沐沐人像合成的主题为大猫咪守护的LoRAl模型&#xff1a;沐沐-大猫咪。这是一款当下在某音、某书…

UniApp中的背景音频播放:深入理解uni.getBackgroundAudioManager()

在移动应用开发中,音频播放是一个常见且重要的功能。UniApp框架提供了强大的背景音频管理器 uni.getBackgroundAudioManager(),让我们能够轻松实现跨平台的音频播放功能。本文将深入探讨如何在UniApp中使用这个API来创建优质的音频播放体验。 1. 背景音频管理器简介 uni.getB…

解决llama-factory运行中的No module named ‘_bz2‘和No module named ‘_lzma‘

问题描述 在llama-factory执行lora微调时&#xff0c;按照手册安装了依赖&#xff0c;微调还是遇到错误 File "/usr/local/python3.10.2/lib/python3.10/site-packages/datasets/utils/extract.py", line 1, in <module>import bz2File "/usr/local/pyt…

基于FreeRTOS+STM32CubeMX+LCD1602+MCP3308(SPI接口)的8通道ADC转换器Proteus仿真

一、仿真原理图: 二、仿真效果: 三、STM32CubeMX配置: 1)、时钟配置: 2)、USART配置: 四、软件部分: 1)、主功能函数: 2)、初始化部分: /* USER CODE BEGIN Header */ /** ******************************************************************************

Apache Flink类型及序列化研读生产应用|得物技术

一、背景 序列化是指将数据从内存中的对象序列化为字节流&#xff0c;以便在网络中传输或持久化存储。序列化在Apache Flink中非常重要&#xff0c;因为它涉及到数据传输和状态管理等关键部分。Apache Flink以其独特的方式来处理数据类型以及序列化&#xff0c;这种方式包括它…

vscode使用Black Formatter以及Flake8实现代码格式化

vscode使用Black Formatter以及Flake8实现代码格式化&#xff08;实现和pycharm相似的效果&#xff09; 简单介绍一下这两个插件的功能&#xff0c;flake8可以实现对python代码风格的检测&#xff0c;对空格换行等内容都会有提示。 Black Formatter则可以实现在保存时&#x…

kafka 消费者 API 使用总结

前言 应用程序使用KafkaConsumer向Kafka订阅主题&#xff0c;并从订阅的主题中接收消息。不同于从其他消息系统读取数据&#xff0c;从Kafka读取数据涉及一些独特的概念和想法。如果不先理解这些概念&#xff0c;则难以理解如何使用消费者API。本文将先解释这些重要的概念&…

【Android面试八股文】如何给ListView RecyclerView加上拉刷新 下拉加载更多机制?

文章目录 一、给 ListView 加上下拉刷新和上拉加载更多的机制1. 下拉刷新(Pull to Refresh)使用 SwipeRefreshLayout 实现下拉刷新:2. 上拉加载更多(Load More on Scroll)实现 ListView 的上拉加载更多:3.注意事项二、给RecyclerView加上拉刷新 & 下拉加载更多机制1.…

【乐吾乐2D可视化组态编辑器】文件

1 文件 文件&#xff1a;文件的新建、打开、导入、保存、另存为、下载JOSN文件、下载ZIP打包文件、导出为HTML、导出为Vue2组件、导出为Vue3组件、导出为React组件&#xff08;老版将不再维护&#xff09;、下载为PNG、下载为SVG 乐吾乐2D可视化组态编辑器demo&#xff1a;ht…

Elasticsearch 聚合查询

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

一、安装VMware16

本篇来源&#xff1a;山海同行 本篇地址&#xff1a;https://shanhaigo.cn/courseDetail/1805875642621952000 本篇资源&#xff1a;以整理到-山海同行 一、VMware虚拟机下载 1. 官网下载 1. 打开官网 打开VMware官网地址&#xff1a;https://www.vmware.com/ 2. 选择下载产…

【研究】两千亿高碳投资:头部资管气候行动观察

在气候语境中&#xff0c;“棕”与“绿”是一组对立色&#xff0c;前者被用来描述与低碳理念不符的行动。近日资管机构的“含棕量”受到了气候倡议者的检视。 正文 国际环保机构绿色和平在与海南成美慈善基金会联合发布《中国资产管理机构气候表现研究报告》&#xff08;以下简…

Springboot中的静态资源配置

目录 静态资源目录 静态资源和 RequestMapping 冲突 静态资源访问前缀 自定义静态资源目录 1.在配置文件中配置静态资源目录 2. 通过 WebMvcConfigurer 配置静态资源目录 欢迎页支持 自定义 Favicon 静态资源目录 Spring Boot 对静态资源提供了支持。默认情况下&#…

【SQL】设置两阶段提交的意义

两阶段提交&#xff08;Two-Phase Commit, 2PC&#xff09;是一种用于分布式系统中协调多个节点以确保事务一致性的协议。它的主要意义在于确保分布式系统中的数据一致性和完整性。具体意义如下&#xff1a; 数据一致性&#xff1a;在分布式环境中&#xff0c;多个节点共同参与…

Java OA系统日程管理模块

# 构建一个OA系统日程管理模块 本文将介绍如何使用Spring Boot和Vue.js构建一个OA系统日程管理模块&#xff0c;支持日程的添加、修改、删除、提醒和共享功能。 ## 项目结构 项目结构如下&#xff1a; text oa-schedule-management/ │ pom.xml │ └───src/main/java…

Pytorch实战(一):LeNet神经网络

文章目录 一、模型实现1.1数据集的下载1.2加载数据集1.3模型训练1.4模型预测 LeNet神经网络是第一个卷积神经网络&#xff08;CNN&#xff09;&#xff0c;首次采用了卷积层、池化层这两个全新的神经网络组件&#xff0c;接收灰度图像&#xff0c;并输出其中包含的手写数字&…