您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript中的useRef 和 useState有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
useState
是一個(gè)內置的 React hook
,它允許您將信息作為狀態(tài)存儲在變量中。它允許您將 React
狀態(tài)添加到功能組件。在下面的示例中,useState()
聲明狀態(tài)變量,而值存儲在計數變量中。setCount
是用于更新此值的函數。
//從 react 導入 useState import React, { useState } from 'react'; function Count() { // 聲明一個(gè)名為 count 的新?tīng)顟B(tài)變量 const [count, setCount] = useState(0);
useRef hook
是一個(gè)內置的 React hook
,它將一個(gè)參數或參數作為其初始值,并返回一個(gè)引用或持久化的可變值。此引用,或簡(jiǎn)稱(chēng) ref
,包含可以使用當前屬性檢索的值。
我們還可以將用戶(hù)輸入存儲在 refs 中并顯示收集到的數據,如下所示:
//導入 useRef hook import React, { useRef } from "react" export default function App() { //創(chuàng )建一個(gè)變量來(lái)存儲引用 const nameRef = useRef(); function handleSubmit(e) { //防止頁(yè)面在提交時(shí)重新加載 e.preventDefault() //輸出 name console.log(nameRef.current.value) } return ( <div className="container"> <form onSubmit={handleSubmit}> <div className="input_group"> <label>Name</label> <input type="text" ref={nameRef}/> </div> <input type="submit"/> </form> </div> ) }
與狀態(tài)不同,存儲在引用或引用中的數據或值保持不變,即使在組件重新渲染之后也是如此。因此,引用不會(huì )影響組件渲染,但狀態(tài)會(huì )影響。
useState
返回 2 個(gè)屬性或一個(gè)數組。一個(gè)是值或狀態(tài),另一個(gè)是更新?tīng)顟B(tài)的函數。相比之下, useRef
只返回一個(gè)值,即實(shí)際存儲的數據。
當參考值發(fā)生變化時(shí),無(wú)需刷新或重新渲染即可更新。但是在 useState
中,組件必須再次渲染以更新?tīng)顟B(tài)或其值。
refs
在獲取用戶(hù)輸入、DOM
元素屬性和存儲不斷更新的值時(shí)很有用。 但是,如果您要存儲組件相關(guān)信息或在組件中使用方法,states
則是最佳選擇。
所以總而言之,這兩種 hook
各有優(yōu)缺點(diǎn),會(huì )根據情況和用途來(lái)使用。
以上是“JavaScript中的useRef 和 useState有什么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學(xué)習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng )、轉載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權請聯(lián)系站長(cháng)郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據,一經(jīng)查實(shí),將立刻刪除涉嫌侵權內容。