溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶(hù)服務(wù)條款》

JavaScript中的useRef?和?useState有什么用

發(fā)布時(shí)間:2021-11-25 11:10:51 來(lái)源:億速云 閱讀:268 作者:小新 欄目:開(kāi)發(fā)技術(shù)

小編給大家分享一下JavaScript中的useRef 和 useState有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

1、useState hook

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);

2、useRef hook

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>

  )

}

3、useRef 與 useState

  • 與狀態(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)或其值。

4、何時(shí)使用 Refs 和 States

refs 在獲取用戶(hù)輸入、DOM 元素屬性和存儲不斷更新的值時(shí)很有用。 但是,如果您要存儲組件相關(guān)信息或在組件中使用方法,states 則是最佳選擇。

所以總而言之,這兩種 hook 各有優(yōu)缺點(diǎn),會(huì )根據情況和用途來(lái)使用。

以上是“JavaScript中的useRef 和 useState有什么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學(xué)習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問(wèn)一下細節

免責聲明:本站發(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í),將立刻刪除涉嫌侵權內容。

AI

国产精品香港三级|日韩精品无码免费专区网站|熟女一区二区三区|一本伊大人香蕉久久网|jzzijzzij亚洲乱熟无码