JavaScript中的useRef 和 useState有什么用

技术JavaScript中的useRef 和 useState有什么用小编给大家分享一下JavaScript中的useRef 和 useState有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望

边肖将与您分享在JavaScript中使用useRef和useState的方法。相信大部分人还不太了解,所以分享这篇文章给大家参考。希望你看完这篇文章会有很多收获。让我们一起来发现吧!

1、useState hook

useState是一个内置的reactihook,它允许您将信息作为状态存储在变量中。它允许您向功能组件添加反应状态。在下面的示例中,useState()声明了状态变量,该值存储在计数变量中。SetCount是用于更新该值的函数。

//从反应中导入使用状态

importReact,{ useState }来自“react”;

function count(){ 0

//声明一个名为count的新状态变量

const[count,setCount]=useState(0);00-1010 userefhook是一个内置的reactihook,它将一个参数或多个参数作为初始值,并返回一个被引用或持久化的变量值。该引用(简称ref)包含可以使用当前属性检索的值。

我们还可以将用户输入存储在 refs 中并显示收集到的数据,如下所示:

//导入用户钩子

importReact,{ useRef }来自“React”

exportdefaultfunctionApp(){ 0

//创建一个变量来存储引用

constnameRef=useRef();

functionhandleSubmit(e){ 0

//提交时防止页面重载

e.preventDefault()

//输出名称

console . log(NameRef . current . value)

}

返回(

divclassName='容器'

formonSubmit={handleSubmit}

divclassName='input_group '

标签名称/标签

inputtype='text'ref={nameRef}/

/div

inputtype='submit'/

/form

/div

)

}

2、useRef hook

与状态不同,存储在引用或引用中的数据或值保持不变,即使在组件被重新呈现后也是如此。因此,引用不会影响组件呈现,但状态会影响组件呈现。

UseState返回2个属性或一个数组。一个是值或状态,另一个是更新状态的函数。相比之下,useRef只返回一个值,即实际存储的数据。

当参考值发生变化时,无需刷新或重新渲染即可进行更新。但是,在useState中,必须再次呈现组件来更新状态或其值。

3、useRef 与 useState

refs在获取用户输入、DOM元素属性和存储不断更新的值方面非常有用。但是,如果您想存储关于组件的信息或在组件中使用方法,状态是最好的选择。

总之,这两种挂钩各有利弊,会根据情况和用途来使用。

以上就是文章“useRef和useState在JavaScript中有什么用?”感谢您的阅读!相信大家都有一定的了解,希望分享的内容对大家有所帮助。想了解更多知识,请关注行业资讯频道!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/116534.html

(0)

相关推荐

  • 十大名木手串,全球十大最名贵木材有哪些

    技术十大名木手串,全球十大最名贵木材有哪些感谢推荐十大名木手串!我个人是很喜欢盘玩木材的,尤其是小叶紫檀。最近迷上了桃木,因为桃木那独有的纹理是非常吸引我的。如下这些就是最世界珍贵的十种木材。一、乌木乌木(阴沉木)兼备木

    生活 2021年11月1日
  • 抖音刷粉网站,抖音刷粉丝会被发现吗?

    技术抖音刷粉网站,抖音刷粉丝会被发现吗?时下抖音是当前国内主流,极火爆,极具人气的产品。当你在网上找抖音刷粉丝刷赞大师和米勒抖音刷粉丝软件怎么刷粉丝方法的时候会出现几万条的相关信息.
    抖音刷粉丝大家一定要选择正规的网站平

    测评 2021年11月10日
  • Redis的底层数据结构-压缩列表

    技术Redis的底层数据结构-压缩列表 Redis的底层数据结构-压缩列表压缩列表(ziplist)是Redis为了节省内存而开发的,是由一系列特殊编码的连续内存块组成的顺序型数据结构,一个压缩列表可以

    礼包 2021年11月11日
  • docker中Dockerfile如何自定义mycentos

    技术docker中Dockerfile如何自定义mycentos这篇文章主要为大家展示了“docker中Dockerfile如何自定义mycentos”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大

    攻略 2021年11月15日
  • 2021-2022第一学期20212316《网络空间安全专业导论》第十一周自学总结

    技术2021-2022第一学期20212316《网络空间安全专业导论》第十一周自学总结 2021-2022第一学期20212316《网络空间安全专业导论》第十一周自学总结2021-2022第一学期202

    礼包 2021年12月20日
  • mac缩略图制作软件(mac图片编辑软件artstudiopro)

    技术电影缩略图制作工具Movie Thumbnails Maker for mac怎么用今天就跟大家聊聊有关电影缩略图制作工具Movie Thumbnails Maker for mac怎么用,可能很多人都不太了解,为了

    攻略 2021年12月24日