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