JavaScript中的useRef 和 useState介紹

更新時(shí)間：2021年11月25日 09:10:01 作者：海擁

這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹，下列文章，我們將學(xué)習(xí) useRef 和 useState hook是什么，它們的區(qū)別以及何時(shí)使用哪個(gè)。這篇文章中的代碼示例將僅涉及功能組件，但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下

1、useState hook

useState 是一個(gè)內(nèi)置的 React hook，它允許您將信息作為狀態(tài)存儲(chǔ)在變量中。它允許您將 React 狀態(tài)添加到功能組件。在下面的示例中，useState()聲明狀態(tài)變量，而值存儲(chǔ)在計(jì)數(shù)變量中。setCount是用于更新此值的函數(shù)。

//從 react 導(dǎo)入 useState

import React, { useState } from 'react';

function Count() {

  // 聲明一個(gè)名為 count 的新狀態(tài)變量

  const [count, setCount] = useState(0);

2、useRef hook

useRef hook 是一個(gè)內(nèi)置的 React hook，它將一個(gè)參數(shù)或參數(shù)作為其初始值，并返回一個(gè)引用或持久化的可變值。此引用，或簡稱 ref，包含可以使用當(dāng)前屬性檢索的值。

我們還可以將用戶輸入存儲(chǔ)在 refs 中并顯示收集到的數(shù)據(jù)，如下所示：

//導(dǎo)入 useRef hook

import React, { useRef } from "react"

export default function App() {

  //創(chuàng)建一個(gè)變量來存儲(chǔ)引用

  const nameRef = useRef();

  function handleSubmit(e) {

    //防止頁面在提交時(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)不同，存儲(chǔ)在引用或引用中的數(shù)據(jù)或值保持不變，即使在組件重新渲染之后也是如此。因此，引用不會(huì)影響組件渲染，但狀態(tài)會(huì)影響。
useState 返回 2 個(gè)屬性或一個(gè)數(shù)組。一個(gè)是值或狀態(tài)，另一個(gè)是更新狀態(tài)的函數(shù)。相比之下， useRef 只返回一個(gè)值，即實(shí)際存儲(chǔ)的數(shù)據(jù)。
當(dāng)參考值發(fā)生變化時(shí)，無需刷新或重新渲染即可更新。但是在 useState 中，組件必須再次渲染以更新狀態(tài)或其值。

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

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

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

到此這篇關(guān)于 JavaScript中的useRef 和 useState介紹的文章就介紹到這了,更多相關(guān) JavaScript中的useRef 和 useState內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: