[React] useRef用法和特性

news2024/11/24 12:25:37

在这里插入图片描述

useRef 与 useState 的区别

一般在使用react-hook的时候,我们用到最多的就是定义变量,以及对应的修改变量
下面是一个最基本的 react-hook 应用程序

const Home = () => {
	const [username, setUserName] = useState('');
	
	return<input 
			value={username}
			onChange={(e) => setUserName(e.target.value)}
		/>}

以上并不是以使用useState的方式来进行对useRef的衬托,两者功能是不同的,只是便于区分


但是如果我想让浏览器渲染的时候,让他的次数自增,这样就会有一些意想不到的隐患…
如下代码所示,当我使用 useEffect 钩子进行input值渲染的时候,他的状态会发生改变,然后又会重新渲染,状态又重新改变,于是就这样无限循环下去…

const Home = () => {
	const [username, setUserName] = useState('');
	
	useEffect(() => { // useEffect 页面渲染时所调用的钩子
		setUserName(username => username + 1);
	}, [username])
	
	return<input 
			value={username} // 循环...循环...循环
		/>}
Created with Raphaël 2.3.0 React useEffect钩子 改变状态 再次循环 yes

useEffect 的 用法以及特性

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

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

相关文章

【物联网】物1— 初步认识MQTT、连接到MQTT服务端

目录 一、MQTT是什么 二、MQTT的版本 两者之间的关系&#xff1a; ​三、MQTT工作的基本原理 3.1、概念 MQTT客户端&#xff1a; MQTT服务端&#xff1a; MQTT主题&#xff1a; 3.2、MQTT订阅/发布主题的特点 相互可独立性&#xff1a; 空间可分离&#xff1a; 时间…

创建第一个DJango3的后端项目

1.安装DJango 需要事先安装python 打开控制台,使用pip命令安装django pip install django如何检验安装成功&#xff1a;在命令行中进入python的环境&#xff0c;导入并打印django的版本信息 2.使用django创建第一个项目 在命令行中进入要存放项目的位置&#xff0c;输入dj…

【mysql】日常遇到的问题解决

目录 MySQL 删除数据库报错 1010 - Error dropping database (cant rmdir) [ERR] 1452 - Cannot add or update a child row: a foreign key constraint fails MySQL 删除数据库报错 1010 - Error dropping database (cant rmdir) 场景复现&#xff1a;navicat中&#xff0c…

Java集合 —— HashMap

一、HashMap是什么 HashMap是一个存储key-value键值对的哈希表&#xff0c;表中每个元素的key都是唯一的&#xff08;通过equals方法判断&#xff09;&#xff0c;查询时通过key的hashcode值即可定位到元素的存储地址&#xff0c;因此HashMap在理想情况下查询时间复杂度为O(1)…

简单谈谈OLTP,OLAP和列存储的概念

简单谈谈OLTP,OLAP和列存储的概念 OLTP(online transaction processing)OLAP(online analytic processing)OLTP VS OLAP数据仓库OLTP数据库和数据仓库之间的差异星型和雪花分析模式列式存储列压缩列式存储和列族内存带宽与矢量化处理列式存储中的排序顺序几个不同的排序顺序 写…

换个花样玩C++(4)细聊C++的引用精妙之处

引用是C++引入的新语言特性。而且在日常工作开发过程中,经常会使用到引用,对于一些做系统架构的架构师而言,这也是不可或缺的一门基本功,我在工作中发现,很多人并没有搞清楚引用。因此我在本篇中将对引用进行详细讨论,希望对大家更好地理解和使用引用起到抛砖引玉的作用。…

你的mysql到底能存多少数据呢?

前言 参考借鉴文章 我说MySQL每张表最好不超过2000万数据&#xff0c;面试官让我回去等通知&#xff1f; 这里自己在总结一下&#xff0c;原因是相关知识欠缺&#xff0c;看别人的文章研究很久才弄明白&#xff0c;所以这里记录一些心得。 作者&#xff1a;阿杆 链接&#xff…

4月28号软件资讯更新合集.....

快速接活&#x1f496;Snowy v2.2.8 已更新 Snowy&#xff08;SnowyAdmin&#xff09;是国内首个国密前后端分离快速开发平台&#xff0c;集成国密加解密插件&#xff0c; 使用 AntdvVite3SpringBootMybatisPlusHutoolSaToken 技术栈开发&#xff0c;软件层面符合等保测评要求…

PPPwizard1.4.3软件使用说明中文翻译稿

PPP软件包使用说明(版本1.4.3) 1. 交付包 PPPWizardxy内容是按照以下模式组成&#xff1a; PPPWizardxy |-- PPPSoftwarePackage_v1.4.3.pdf |-- RTRover |-- compile.sh |-- generateLowLevel.cpp |-- getStream.cpp |-- laurichesse_ion_gnss_2015_september_bdp.pdf |-- …

JVM内存模型的演变

1&#xff0c;背景 class文件、类的加载过程。我们的class文件就要进入到JVM内存里&#xff0c;我们沿着经典的JDK1.6&#xff0c;JDK1.7&#xff0c;JDK1.8看看在其中都经历了哪些改变 概念的统一&#xff1a; 方法区&#xff1a; 方法区可以看作是JVM逻辑上管理一片区域的…

深度学习-第T5周——运动鞋品牌识别

深度学习-第T5周——运动鞋品牌识别 深度学习-第T5周——运动鞋品牌识别一、前言二、我的环境三、前期工作1、导入数据集2、查看图片数目3、查看数据 四、数据预处理1、 加载数据1、设置图片格式2、划分训练集3、划分验证集4、查看标签 2、数据可视化3、检查数据4、配置数据集 …

微短剧“小阳春”,“爱优腾芒”抢滩登陆?

降本增效一整年&#xff0c;长视频平台们似乎扭转了市场对于它们“烧钱”的印象。 爱奇艺宣布2022全年盈利&#xff0c;腾讯视频宣布从去年10月起开始盈利&#xff0c;视频平台们结束了一场“无限战争”。 与此同时&#xff0c;随着短视频平台的崛起&#xff0c;视频内容的形…

从0到1带你构建——低代码开发入门案例

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端&#xff08;Node.js&#xff09; &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿多个前端 offer&#xff08;…

【算法】欧拉路径的DFS存储顺序

欧拉路径和欧拉回路 对于无向图&#xff0c;所有边都是连通的。 &#xff08;1&#xff09;存在欧拉路径的充分必要条件&#xff1a;度数为奇数的点只能有0个或2个。 &#xff08;2&#xff09;存在欧拉回路的充分必要条件&#xff1a;度数为奇数的点只能有0个。 对于有向图&a…

jvm之字节码

写在前面 java字节码由单字节的指令(也叫做操作码)组成&#xff0c;但一个 byte 最多能够存储 256 个指令&#xff0c;够用吗&#xff1f;截止到目前是够的&#xff0c;因为指令的个数是200多一点&#xff0c;指令分为如下四类&#xff1a; 1&#xff1a;栈操作指令&#xff…

【前端基础知识】Vue中的变量不是响应式的吗?属性赋值后视图不变化的原因是什么?

目录 &#x1f914;问题&#x1f4dd;回答&#x1f3a8;使用场景动态添加属性动态添加数组元素 ❌注意事项$set只能在响应式对象上使用$set不能用于根级别的属性$set的性能问题 &#x1f4c4;总结 &#x1f914;问题 Vue是一款在国内非常流行的框架&#xff0c;采用MVVM架构&a…

数据库课设--基于Python+MySQL的餐厅点餐系统

文章目录 一、系统需求分析二、系统设计1. 功能结构设计2、概念设计2.2.1 bill_food表E-R图2.2.2 bills表E-R图2.2.3 categories E-R图2.2.4 discounts表 E-R图2.2.5 emp表E-R图2.2.6 food 表E-R图2.2.7 member表E-R图2.2.8 member_point_bill表E-R图2.2.9 servers表E-R图2.2.1…

五一出行!如何辨别偷拍设备

五一小长假即将到来&#xff0c;作为出行的重要一环&#xff0c;我们都希望能在旅途中享受安全与便捷。但不可避免的事&#xff0c;有些不法分子可能会通过安装针孔摄像头等方式进行非法监控。从表面上看&#xff0c;我们很难分辨。这些小小的设备&#xff0c;被伪装成日常用品…

elementUI组件库el-switch开关控件的样式设置,精细至开关内的文字、圆点、背景设置

开发项目时做一种开关控件样式&#xff0c;要求显示和隐藏两种状态下的文字、圆点、背景色等都有区别&#xff0c;就研究了一下&#xff0c;各种设置已在代码中标注&#xff0c;小白也可直接复制使用。 <el-table-column label"操作"><template slot-scope&…

【FPGA】Spartan®-7器件XC7S75-1FGGA484C、XC7S15-1FTGB196C现场可编程门阵列芯片

赛灵思 Spartan-7现场可编程门阵列采用运行频率超过200DMIP的MicroBlaze™软处理器&#xff0c;支持800Mb/s DDR3&#xff0c;基于28nm技术。FPGA是半导体器件&#xff0c;基于通过可编程互连系统连接的可配置逻辑块 (CLB) 矩阵。Spartan-7具有集成的模数转换器、专用安全特性以…