目錄

• 1、useState hook
• 2、useRef hook
• 3、useRef 與 useState
• 4、何時使用 Refs 和 States

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

    consolehttp://www.cppcns.com
 
.log(nameRef.current.value)

  }

  return (

    <div className="container">

      <form onSubmit={handleSubmit}&gt;

        <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 元素屬性和儲存不斷更新的值時很有用。 但是，如果您要儲存元件相關信http://www.cppcns.com息或在元件中使用方法，states 則是最佳選擇。

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

到此這篇關於 psls中的useRef 和 useState介紹的文章就介紹到這了,更多相關 Script中的useRef 和 useState內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多http://www.cppcns.com支援我們！