边肖将与您分享在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