React: memo

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

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件,当它的父组件重新渲染时,只要它的新 props 与旧 props 相同时,React 就不会重新渲染它。这样的组件被称为 记忆化的(memoized)组件。

一、未使用memo

1. 代码
import { useState } from "react";// 未做memo记忆化之前
function Son() {console.log('子组件重新渲染');return (<><div>子组件</div></>)
}function App() {const [count1, setCount1] = useState(0);return (<><div>父组件:{count1} <button onClick={() => setCount1(count1 + 1)}>+</button></div><Son /></>)
}export default App;
2.运行效果

在这里插入图片描述

二、使用memo

1. 代码
import { memo,useState } from "react";// 使用memo
const MemoSon = memo(function Son() {console.log('子组件重新渲染');return (<><div>子组件</div></>)
})function App() {const [count1, setCount1] = useState(0);return (<><div>父组件:{count1} <button onClick={() => setCount1(count1 + 1)}>+</button></div><MemoSon /></>)
}export default App;
2.运行效果

在这里插入图片描述

三、props的比较机制

在使用 memo 缓存组件之后,React会对 每一个prop 使用 Object.is 比较新值和老值,返回true,表示没有变化

  1. prop 是简单类型
    Object.is(3, 3) => true 没有变化

  2. prop 是引用类型(对象/数组)
    Object.is([], []) => false 有变化,React 只关心引用是否变化

四、 prop为引用类型,如何避免子组件重新渲染?

当prop为简单类型时很好理解,但当prop是引用类型时,即使prop的值内容不变,但是引用地址不同,也会触发重新渲染,如下示例:

1. 代码
import { memo, useState } from "react";// 3. prop为引用类型
const MemoSon = memo(function Son({list}) {console.log('子组件再次渲染');return (<><div>子组件:{list}</div></>)
})function App() {const [count1, setCount1] = useState(0);// 3. prop为引用类型const list = [1,2,3];return (<><div>父组件:{count1} <button onClick={() => setCount1(count1 + 1)}>+</button></div>{/* 3. prop为引用类型 */}<MemoSon list={list} /></>)
}export default App;
2. 效果

在这里插入图片描述

3. 使用useMemo 缓存list
	...// 保证引用稳定 => useMemo 在组件渲染的过程中缓存一个值const list = useMemo(() => {return [1,2,3];}, []);...
4. 效果

在这里插入图片描述

五、完整代码

import { memo, useMemo, useState } from "react";// 1. 未使用memo
/* function Son() {console.log('子组件再次渲染');return (<><div>子组件</div></>)
} */// 2. memo 记忆化后
/* const MemoSon = memo(function Son() {console.log('子组件再次渲染');return (<><div>子组件</div></>)
}) */// 3. prop为引用类型
// 传递引用类型的 prop,比较的是新值和旧值的引用是否相等,当父组件的函数重新执行时,实际上形成的是新的引用
const MemoSon = memo(function Son({list}) {console.log('子组件再次渲染');return (<><div>子组件:{list}</div></>)
})function App() {const [count1, setCount1] = useState(0);// 3.1 prop为引用类型 直接定义一个 list// const list = [1,2,3];// 3.2 prop为引用类型,使用 useMemo 缓存list// 保证引用稳定 => useMemo 在组件渲染的过程中缓存一个值const list = useMemo(() => {return [1,2,3];}, []);return (<><div>父组件:{count1} <button onClick={() => setCount1(count1 + 1)}>+</button></div>{/* // 1. 未使用memo */}{/* <Son /> */}{/* // 2. 使用memo */}{/* <MemoSon /> */}{/* 3. prop为引用类型 */}<MemoSon list={list} /></>)
}export default App;

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

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

相关文章

Docker Compose常用命令与属性

大家好&#xff0c;今天给大家分享Docker Compose的常用命令&#xff0c;以及docker-compose文件的属性。Docker Compose 是一个用于定义和运行多容器 Docker 应用应用的重要工具。它通过一个配置文件&#xff08;docker-compose.yml&#xff09;来详细定义多个容器之间的关联、…

软考中级-软件设计师 (十一)标准化和软件知识产权基础知识

一、标准化基础知识 1.1标准的分类 根据适用的范围分类&#xff1a; 国际标准指国际化标准组织&#xff08;ISO&#xff09;、国际电工委员会&#xff08;IEC&#xff09;所制定的标准&#xff0c;以及ISO所收录的其他国际组织制定的标准。 国家标准&#xff1a;中华人民共和…

Redis20种使用场景

Redis20种使用场景 1缓存2抽奖3Set实现点赞/收藏功能4排行榜5PV统计&#xff08;incr自增计数&#xff09;6UV统计&#xff08;HeyperLogLog&#xff09;7去重&#xff08;BloomFiler&#xff09;8用户签到&#xff08;BitMap&#xff09;9GEO搜附近10简单限流11全局ID12简单分…

在大型项目上,Python 是个烂语言吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Python的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; python项目超过5万行&#x…

前端之电力系统SVG图低代码

其实所有的图形都是由点&#xff0c;线&#xff0c;面组成的。点线面可以组成一个设备。下面就简单讲讲点线面是怎么画的吧 对于线&#xff0c;可以用path <g><path:d"M ${beginX},${beginY} L ${endX},${endY}":stroke-width"lineWidth":strok…

【Pip】pip 安装第三方包异常:[SSL:CERTIFICATE_VERIFY_FAILED]解决方案

pip 安装第三方包异常:[SSL:CERTIFICATE_VERIFY_FAILED] 大家好 我是寸铁&#x1f44a; 总结了一篇pip 安装第三方包异常:[SSL:CERTIFICATE_VERIFY_FAILED]✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 报错 今天在安装第三方包时报错如下: 解决方案 本质上是需要指定信任的镜像…

C#【进阶】泛型

1、泛型 文章目录 1、泛型1、泛型是什么2、泛型分类3、泛型类和接口4、泛型方法5、泛型的作用思考 泛型方法判断类型 2、泛型约束1、什么是泛型2、各泛型约束3、约束的组合使用4、多个泛型有约束思考1 泛型实现单例模式思考2 ArrayList泛型实现增删查改 1、泛型是什么 泛型实现…

pytest教程-46-钩子函数-pytest_sessionstart

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了pytest_report_testitemFinished钩子函数的使用方法&#xff0c;本小节我们讲解一下pytest_sessionstart钩子函数的使用方法。 pytest_sessionstart 是 Pytest 提供的一个钩子函数&#xff0c…

python使用opencv实现手势识别并控制ppt

需要使用到的包 from collections import dequeimport cv2 import numpy as np import math import shutilimport sys import os import time#这个求出现频率最高的太慢了&#xff0c;所以把它放弃了 from collections import Counter准备好安装包后需要获取图片 def star():…

DockerFile介绍与使用

一、DockerFile介绍 大家好&#xff0c;今天给大家分享一下关于 DockerFile 的介绍与使用&#xff0c;DockerFile 是一个用于定义如何构建 Docker 镜像的文本文件&#xff0c;具体来说&#xff0c;具有以下重要作用&#xff1a; 标准化构建&#xff1a;提供了一种统一、可重复…

SQL注入漏洞常用绕过方法

SQL注入漏洞 漏洞描述 Web 程序代码中对于用户提交的参数未做过滤就直接放到 SQL 语句中执行&#xff0c;导致参数中的特殊字符打破了原有的SQL 语句逻辑&#xff0c;黑客可以利用该漏洞执行任意 SQL 语句&#xff0c;如查询数据、下载数据、写入webshell 、执行系统命令以及…

企业OA办公系统开发笔记:1、搭建后端环境

文章目录 企业办公系统&#xff1a;搭建环境一、项目介绍1、介绍2、技术栈3、项目模块4、数据库 二、搭建环境1、搭建后端1.1、搭建父工程clfwzx-oa-parent1.2、搭建工具类父模块common1.3、搭建工具类common的子模块1.4、搭建实体类模块model和项目模块service-oa 2、配置依赖…

【前端】CSS基础(3)

文章目录 前言1. CSS常用元素属性1.1 字体属性1.1.1 字体1.1.2 字体大小1.1.3 字体颜色1.1.4 字体粗细1.1.5 文字样式 前言 这篇博客仅仅是对CSS的基本结构进行了一些说明&#xff0c;关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏&#xff0c;会持续…

做软件测试如何突破月薪20K?

IT行业从事技术岗位&#xff0c;尤其对于测试来说&#xff0c;月薪20K&#xff0c;即便在北上广深这类一线城市薪水也不算低了&#xff0c;可以说对于大部分测试岗位从业者来说&#xff0c;20K都是一个坎儿。 那么&#xff0c;问题来了&#xff0c;做软件测试如何可以达到月薪…

连锁收银系统如何助力实体门店私域运营

作为实体门店&#xff0c;私域运营是提升客户黏性和增加复购率的重要策略之一。而连锁收银系统在私域运营中扮演了关键的角色&#xff0c;它不仅可以帮助门店管理客户信息和消费记录&#xff0c;还能够通过数据分析和营销功能提供个性化的服务和推广活动。下面看看连锁收银系统…

Qt 6.7 正式发布!

本文翻译自&#xff1a;Qt 6.7 Released! 原文作者&#xff1a;Qt Group研发总监Volker Hilsheimer 在最新发布的Qt 6.7版本中&#xff0c;我们大大小小作出了许多改善&#xff0c;以便您在构建现代应用程序和用户体验时能够享受更多乐趣。 部分新增功能已推出了技术预览版&a…

证照之星是什么软件 证照之星哪个版本好用?证照之星支持哪些相机 证照之星XE免费版

许多人都需要使用证件照&#xff0c;为了满足这一需求&#xff0c;人们会使用照相机、手机、电脑等工具进行拍摄。除此之外&#xff0c;市面上还存在专门的证件照拍摄软件&#xff0c;比如证照之星。那么&#xff0c;各位小伙伴是否了解证照之星哪个版本好用&#xff0c;证照之…

什么?你设计接口什么都不考虑?

如果让你设计一个接口&#xff0c;你会考虑哪些问题&#xff1f; 1.接口参数校验 接口的入参和返回值都需要进行校验。 入参是否不能为空&#xff0c;入参的长度限制是多少&#xff0c;入参的格式限制&#xff0c;如邮箱格式限制 返回值是否为空&#xff0c;如果为空的时候是…

单位个人如何向期刊投稿发表文章?

在单位担任信息宣传员一职以来,我深感肩上的责任重大。每月的对外信息宣传投稿不仅是工作的核心,更是衡量我们部门成效的重要指标。起初,我满腔热血,以为只要勤勉努力,将精心撰写的稿件投至各大报社、报纸期刊的官方邮箱,就能顺利登上版面,赢得读者的青睐。然而,现实远比理想骨…

6、Qt—Log4Qt使用小记1

开发平台&#xff1a;Win10 64位 开发环境&#xff1a;Qt Creator 13.0.0 构建环境&#xff1a;Qt 5.15.2 MSVC2019 64位 一、Log4Qt简介 Log4Qt是使用Trolltech Qt Framework的Apache Software Foundation Log4j包的C 端口。它旨在供开源和商业Qt项目使用。所以 Log4Qt 是Apa…