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

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

1、useState hook

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

//從 react 導入 useState

import React, { useState } from 'react';

function Count() {

  // 聲明一個名為 count 的新狀態變量

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

2、useRef hook

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

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

//導入 useRef hook

import React, { useRef } from "react"

export default function App() {

  //創建一個變量來存儲引用

  const nameRef = useRef();

  function handleSubmit(e) {

    //防止頁面在提交時重新加載

    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

• 與狀態不同，存儲在引用或引用中的數據或值保持不變，即使在組件重新渲染之后也是如此。因此，引用不會影響組件渲染，但狀態會影響。

• useState 返回 2 個屬性或一個數組。一個是值或狀態，另一個是更新狀態的函數。相比之下， useRef 只返回一個值，即實際存儲的數據。

• 當參考值發生變化時，無需刷新或重新渲染即可更新。但是在 useState 中，組件必須再次渲染以更新狀態或其值。

4、何時使用 Refs 和 States

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

所以總而言之，這兩種 hook 各有優缺點，會根據情況和用途來使用。

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