React 中的 useRef 與 useState

ttentau發表於2024-04-16
React

React 是一個流行的 JavaScript 庫，用於構建使用者介面。它提供了幾個鉤子，使開發人員能夠管理狀態並執行副作用。 React 中兩個常用的鉤子是 useRef 和 useState 。雖然它們乍一看似乎很相似，但它們具有不同的目的並且具有不同的用例。在本文中，我們將深入探討 useRef 和 useState ，比較它們的功能並提供示例來說明它們的用法。

理解 useRef ：

React 中的 useRef 鉤子建立了一個在元件呈現之間持續存在的可變引用。與管理狀態並觸發重新渲染的 useState 不同， useRef 主要用於訪問和操作 DOM 或儲存不觸發重新渲染的可變值。它返回一個帶有 current 屬性的可變物件。

示例 1：訪問 DOM 元素

假設我們想在單擊按鈕時關注輸入欄位。我們可以使用 useRef 來實現這一點，如下所示：

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

在上面的示例中，我們使用 useRef 建立一個 ref 並將其分配給 inputRef 變數。我們將 inputRef 傳遞給輸入元素的 ref 屬性，使其可用於訪問輸入的 DOM 節點。單擊按鈕時，將執行 handleClick 函式，並呼叫 inputRef.current.focus() 以聚焦於輸入欄位。

理解 useState ：

useState 掛鉤用於管理功能元件內的狀態。它允許我們建立可以更新的變數，並在其值發生變化時觸發重新渲染。 useState 鉤子返回一個包含兩個元素的陣列：當前狀態值和更新它的函式。

示例 2：管理計數器

讓我們使用 useState 建立一個簡單的計數器元件：

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在上面的程式碼中，我們使用陣列解構語法來分配 count 狀態變數和 setCount 函式來更新它。使用 useState(0) 將 count 的初始值設定為 0 。單擊按鈕時，將呼叫 increment 函式，透過新增 1 更新 count 狀態。結果，元件重新渲染，反映 count 的更新值。

比較 useRef 和 useState ：

雖然 useRef 和 useState 都可以儲存值，但它們有不同的用途：

  1. 管理狀態： useState 旨在管理元件內的狀態。當狀態更新時，它會觸發重新渲染，確保 UI 反映最新值。
  2. 訪問和操作 DOM： useRef 主要用於與 DOM 互動，例如訪問輸入值或關注元素。它允許我們儲存對 DOM 節點的引用並檢索它們的屬性，而無需觸發重新渲染。
  3. 跨渲染保留值： useRef 在元件渲染之間維護相同的值，而 useState 在每次渲染期間初始化狀態。
  4. 重新渲染行為：更新 useState 返回的值會導致元件重新渲染，同時更新使用 useRef 的 current 屬性 不會觸發重新渲染。

用例：

為了進一步瞭解 useRef 和 useState 的用例，讓我們探討一下每個鉤子更適合的一些場景：

1. useRef 用例：

1.1. 訪問 DOM 元素：當您需要訪問或操作 DOM 元素（例如聚焦輸入、滾動到特定元素或測量元素的大小）時， useRef 是合適的選擇。它允許您建立對 DOM 節點的引用並訪問其屬性或方法。

1.2. 儲存可變值：如果您有一個值需要在渲染過程中保留，但不會影響元件的 UI 或觸發重新渲染， useRef 是一個不錯的選擇。例如，您可以使用 useRef 儲存以前的值、快取值或保留可變值以進行比較。

2. useState 用例：

2.1. 管理元件狀態：當您需要管理和更新元件內的狀態時，建議使用 useState 方法。它提供了一種儲存和更新影響元件 UI 並觸發重新渲染的值的方法。

2.2. 處理使用者互動：如果元件中有互動元素（例如核取方塊、輸入欄位或切換開關），則通常使用 useState 來管理與這些互動相關的狀態。您可以根據使用者輸入更新狀態並反映 UI 中的更改。

對比示例：

為了更清楚地說明 useRef 和 useState 之間的區別，讓我們考慮一個可以使用兩個鉤子的示例：

假設我們有一個帶有輸入欄位和提交按鈕的表單。當使用者單擊提交按鈕時，我們希望在不清除輸入欄位的情況下顯示成功訊息。

使用 useRef：

import React, { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // 提交表單
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // 顯示成功訊息而不清除輸入欄位
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

在此示例中，我們使用 useRef 建立對輸入欄位的引用。單擊提交按鈕後，我們使用 inputRef.current.value 訪問輸入欄位的值並繼續提交表單。輸入欄位的值未清除，因為我們沒有更新狀態或觸發重新渲染。

使用 useState ：

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // 提交表單
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // 展示成功訊息
    setInputValue(''); // 清理輸入內容
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

在這個版本中，我們使用 useState 來管理輸入欄位的狀態。我們使用 useState('') 用空字串初始化 inputValue 狀態。當使用者在輸入欄位中鍵入內容時，將呼叫 handleInputChange 函式，更新狀態並觸發重新渲染以反映新值。單擊提交按鈕時，將執行 handleSubmit 函式，該函式顯示成功訊息並透過將 inputValue 狀態設定為空字串來清除輸入欄位。

在此示例中， useState 用於管理輸入欄位的值並在使用者與其互動時觸發重新渲染。 displaySuccessMessage 中的狀態更新透過更新 inputValue 狀態來清除輸入欄位。

結論：

總之， useRef 和 useState 都是React中必不可少的鉤子，但它們有不同的用途。 useRef 主要用於訪問和操作 DOM 或儲存可變值而不觸發重新渲染。它提供了一個在元件呈現之間持續存在的可變引用。另一方面， useState 用於管理元件狀態，當狀態更新時觸發重新渲染。它返回一個狀態值和一個更新它的函式。

瞭解 useRef 和 useState 之間的差異並瞭解何時使用每個鉤子對於編寫有效且最佳化的 React 元件至關重要。透過正確利用 useRef 和 useState ，您可以使用 React 構建互動式和高效能應用程式。

謝謝閱讀！

我希望您覺得這篇文章有用。如果您有任何疑問或建議，請留言。您的反饋幫助我變得更好。

相關文章