React学习day08-useReducer、useMemo、memo、useCallback、forwardRef、useInperativeHandle

15、useReducer

1)作用:用来管理相对复杂的状态数据,类似于useState
2)使用步骤(传递一般的参数)(在APP.js中):
①定义一个reducer函数,在函数中通过switch语句,实现不同action对应不同状态

②在组件中调用useReducer,并传入reducer函数和state的初始值

查看state初始值

③事件发生时,通过dispatch传递action对象

④效果

⑤传递自定义参数,实现更新

在reducer函数中新增

(这里是直接返回传的值)

在触发dispatch传参时,传递payload

效果:

16、useMemo(在计算性能消耗很大时使用)

(1)作用:在组件每次渲染的时候缓存计算结果

(2)语法:useMemo(()=>{},[依赖项])(只有依赖项变化时,执行函数)

(3)示例:

1)准备代码(以返回num1平方为例)

2)不使用useMemo,与变化无关的选项也会引起函数的执行

3)使用useMemo后

17、memo

(1)作用:允许组件在Props没有改变的情况下跳过渲染

(2)语法:memo(子组件)

(3)应用场景:在React组件的默认渲染机制中只要父组件重新渲染子组件也会重新渲染时使用。

(4)示例(以简单prop类型为例)

修改后(职业props发生变化时才会重新渲染):

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

1)prop是简单类型

有变化时

传入一个常量

2)prop是引用类型,以数组为例,即使新值和老值均是空数组,也会显示有变化(因为引用实际上是形成新的数组引用)(可以使用useMemo缓存解决)

即使每次传入的是相同的数组,仍会触发函数

解决方法:使用useMemo,利用空依赖,仅在组件渲染时执行一次

18、useCallback

(1)作用:在组件重新渲染时缓存函数(使用useCallback包裹函数之后,函数可以保证在App重新渲染时保持稳定)

(2)语法:useCallback(函数)

未使用(即使使用memo缓存了)

使用后

19、React的forwardRef(在父组件通过ref拿到子组件的元素)

(1)作用:使用ref暴露DOM节点给父节点

(2)语法:在父组件中使用useRef(),通过ref传参给子组件;在子组件中使用forwardRef将子组件的内容包裹起来,并设置参数

(3)示例

初始代码:

1)在父组件中使用useRef(),通过ref传参给子组件

2)在子组件中使用forwardRef将子组件的内容包裹起来,并设置参数

20、useInperativeHandle

(1)作用:通过ref保留子组件的方法

(2)语法:

1)父组件内:使用useRef声明,并通过ref传参,然后通过父组件的ref获取子组件的方法,绑定点击事件
2)子组件内:通过useRef与组件绑定,提供方法,暴露方法

(3)适用场景:父组件需要使用子组件的方法时(通过ref调用子组件的方法)

(4)示例

初始代码:

在子组件内:

通过useRef与组件绑定,提供focus方法,暴露方法

在父组件内

通过父组件的ref获取子组件的方法,绑定点击事件

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

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

相关文章

Linux——k8s认识

计算资源隔离 - 更方便进行高并发架构的维护和升级 - 架构管理的灵活性更高,不再以单个节点的物理资源作为基础 技术: - 硬件辅助虚拟化 - 容器技术 在企业部署方案中,很少以单节点实现虚拟化和容器技术,一般以集群状态来运…

68 - I. 二叉搜索树的最近公共祖先

comments: true difficulty: 简单 edit_url: https://github.com/doocs/leetcode/edit/main/lcof/%E9%9D%A2%E8%AF%95%E9%A2%9868%20-%20I.%20%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91%E7%9A%84%E6%9C%80%E8%BF%91%E5%85%AC%E5%85%B1%E7%A5%96%E5%85%88/README.md 面试题…

MySQL高阶1873-计算特殊奖金

目录 题目 准备数据 分析数据 总结 题目 编写解决方案,计算每个雇员的奖金。如果一个雇员的 id 是 奇数 并且他的名字不是以 M 开头,那么他的奖金是他工资的 100% ,否则奖金为 0 。 返回的结果按照 employee_id 排序。 准备数据 Crea…

【Python语言初识(一)】

一、python简史 1.1、python的历史 1989年圣诞节:Guido von Rossum开始写Python语言的编译器。1991年2月:第一个Python编译器(同时也是解释器)诞生,它是用C语言实现的(后面),可以调…

Python编码系列—Python代理模式:为对象赋予超能力的魔法

🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…

数据结构(Day14)

一、学习内容 结构体 概念 引入:定义整数赋值为10 int a10; 定义小数赋值为3.14 float b3.14; 定义5个整数并赋值 int arr[5] {1 , 2 , 3 , 4 ,5}; 定义一个学生并赋值学号姓名成绩 定义一个雪糕并赋值名称产地单价 问题:没有学生、雪糕 数据类型 解决&…

Python语言学习-pandas库学习

一、什么是Pandas库 Pandas是python的第三方库,他用于灵活的数据操作,数据可视化,数据清洗,数据的聚合和转换,数据的可视化 二、安装pandas库 在终端中运行 pip install pandas 导入Pandas库并重命名为pd import …

2024年9月第3周AI资讯

阅读时间:3-4min 更新时间:2024.9.16-2024.9.20 目录 OpenAI 推出 o1:一种新的“推理”人工智能模型 微软为 Excel 和 Word 添加了更快的 Copilot World Labs 利用 AI 创建 3D 世界 AI 利用文本创建开放世界视频游戏 OpenAI 推出 o1&#x…

【vue element-ui】关于删除按钮的提示框,可一键复制

实现效果: Delete: function (id) {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,center: true,}).then(() > {Delete(id).then(() > {this.$message({type: success,message: 删…

工业交换机如何保证数据的访问安全

在现代工业自动化环境中,工业交换机作为关键的网络设备,扮演着数据传输和信息交互的重要角色。为了确保数据的访问安全,工业交换机不仅具备高效的转发性能,还集成了多层次的安全防护机制,以抵御各种潜在的网络威胁。 首…

传输大咖44 | 云计算企业大数据迁移如何更安全高效?

在云计算时代,数据已成为企业最宝贵的资产之一。对于依赖云服务的企业和组织来说,大数据迁移是实现业务扩展和优化的关键步骤。然而,这一过程并非没有挑战。传统的文件传输方式在安全性、稳定性和速度上往往无法满足云计算企业的需求。本文将…

C++(Qt)软件调试---断点高级用法(20)

C(Qt)软件调试—断点高级用法(20) 文章目录 C(Qt)软件调试---断点高级用法(20)[toc]1、概述2、断点高级用法1.1 条件断点1.2 日志断点/记录点/消息追踪点1.3 函数断点1.4 命中次数断点1.5 异常断点1.6 等待断点/触发断点1.7 临时断…

掌握数据中心虚拟化:关键挑战与解决方案

数据中心虚拟化是使用云软件平台将物理数据中心转变为数字数据中心的过程,使企业能够远程访问信息和应用程序。它包括在数据中心内创建物理基础设施的多个虚拟版本,通过将服务器、存储和网络等资源划分为虚拟实体来实现资源的高效利用。 虚拟化环境中的关…

Tomcat CVE-2017-12615 靶场攻略

漏洞描述 当 Tomcat运⾏在Windows操作系统时,且启⽤了HTTP PUT请求⽅法(例如,将 readonly初始化参数由默认值设置为false),攻击者将有可能可通过精⼼构造的攻击请求数据包向服务器上传包含任意代 的 JSP ⽂件&#xf…

MySQL —— 索引

索引的概念 MySQL的索引是⼀种数据结构,它可以帮助数据库高效地查询、更新数据表中的数据。索引通过 ⼀定的规则排列数据表中的记录,使得对表的查询可以通过对索引的搜索来加快速度。 MySQL索引类似于书籍的目录,通过指向数据行的位置&…

Docker + Win 10 学习记录

下载Docker Release notes | Docker Docs 推荐使用4.33版本,最新的Docker版本在win10 22H2无法安装。需要升级到win11. 查看Win10版本是否与最新版的Docker兼容 运行 win R, 然后输入winver 如果你的Docker版本无法在当前的win10安装,请更…

基于云计算的虚拟电厂负荷预测

基于云计算的虚拟电厂负荷预测 随着电网规模的扩大及新能源的不断应用,并网电网的安全性和经济性备受关注。 电网调度不再是单一或局部控制,而是采用智能网络集成方式调度 。 智能电网应具有以下特点:坚强自愈,可以抵御外来干扰甚…

如何删除EXCELL文件中的空行?

1,选择某一列 2,点击《开始》《查找和选择》>《定位条件》,调出《定位条件》的选择框; 3,在定位条件选项框,选择《空值》; 4,找到变灰被选中的某一行,右击《删除》 5&…

Qt 构建版本

Qt提供了三种不同的构建版本:Debug版本(调试版本)、Release版本(发布版本)和Profile版本(概述版本),每种版本都有其特定的用途和编译设置。 Debug版本(调试版本&#x…

基于 SpringBoot 的在线考试系统

专业团队,咨询就送开题报告,欢迎大家私信留言,联系方式在文章底部 摘 要 网络的广泛应用给生活带来了十分的便利。所以把在线考试管理与现在网络相结合,利用java技术建设在线考试系统,实现在线考试的信息化管理。则对…