React 是一個(gè)流行的 JavaScript 庫，用于構(gòu)建用戶界面。它提供了幾個(gè)鉤子，使開發(fā)人員能夠管理狀態(tài)并執(zhí)行副作用。 React 中兩個(gè)常用的鉤子是 useRef 和 useState 。雖然它們乍一看似乎很相似，但它們具有不同的目的并且具有不同的用例。在本文中，我們將深入探討 useRef 和 useState ，比較它們的功能并提供示例來說明它們的用法。

理解 useRef ：

React 中的 useRef 鉤子創(chuàng)建了一個(gè)在組件呈現(xiàn)之間持續(xù)存在的可變引用。與管理狀態(tài)并觸發(fā)重新渲染的 useState 不同， useRef 主要用于訪問和操作 DOM 或存儲(chǔ)不觸發(fā)重新渲染的可變值。它返回一個(gè)帶有 current 屬性的可變對(duì)象。

示例 1：訪問 DOM 元素

假設(shè)我們想在單擊按鈕時(shí)關(guān)注輸入字段。我們可以使用 useRef 來實(shí)現(xiàn)這一點(diǎn)，如下所示：

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 創(chuàng)建一個(gè) ref 并將其分配給 inputRef 變量。我們將 inputRef 傳遞給輸入元素的 ref 屬性，使其可用于訪問輸入的 DOM 節(jié)點(diǎn)。單擊按鈕時(shí)，將執(zhí)行 handleClick 函數(shù)，并調(diào)用 inputRef.current.focus() 以聚焦于輸入字段。

理解 useState ：

useState 掛鉤用于管理功能組件內(nèi)的狀態(tài)。它允許我們創(chuàng)建可以更新的變量，并在其值發(fā)生變化時(shí)觸發(fā)重新渲染。 useState 鉤子返回一個(gè)包含兩個(gè)元素的數(shù)組：當(dāng)前狀態(tài)值和更新它的函數(shù)。

示例 2：管理計(jì)數(shù)器

讓我們使用 useState 創(chuàng)建一個(gè)簡單的計(jì)數(shù)器組件：

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

在上面的代碼中，我們使用數(shù)組解構(gòu)語法來分配 count 狀態(tài)變量和 setCount 函數(shù)來更新它。使用 useState(0) 將 count 的初始值設(shè)置為 0 。單擊按鈕時(shí)，將調(diào)用 increment 函數(shù)，通過添加 1 更新 count 狀態(tài)。結(jié)果，組件重新渲染，反映 count 的更新值。

比較 useRef 和 useState ：

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

• 管理狀態(tài)： useState 旨在管理組件內(nèi)的狀態(tài)。當(dāng)狀態(tài)更新時(shí)，它會(huì)觸發(fā)重新渲染，確保 UI 反映最新值。
• 訪問和操作 DOM： useRef 主要用于與 DOM 交互，例如訪問輸入值或關(guān)注元素。它允許我們存儲(chǔ)對(duì) DOM 節(jié)點(diǎn)的引用并檢索它們的屬性，而無需觸發(fā)重新渲染。
• 跨渲染保留值： useRef 在組件渲染之間維護(hù)相同的值，而 useState 在每次渲染期間初始化狀態(tài)。
• 重新渲染行為：更新 useState 返回的值會(huì)導(dǎo)致組件重新渲染，同時(shí)更新使用 useRef 的 current 屬性 不會(huì)觸發(fā)重新渲染。

用例：

為了進(jìn)一步了解 useRef 和 useState 的用例，讓我們探討一下每個(gè)鉤子更適合的一些場景：

1. useRef 用例：

1.1.  訪問 DOM 元素：當(dāng)您需要訪問或操作 DOM 元素（例如聚焦輸入、滾動(dòng)到特定元素或測量元素的大小）時(shí)， useRef 是合適的選擇。它允許您創(chuàng)建對(duì) DOM 節(jié)點(diǎn)的引用并訪問其屬性或方法。

1.2.  存儲(chǔ)可變值：如果您有一個(gè)值需要在渲染過程中保留，但不會(huì)影響組件的 UI 或觸發(fā)重新渲染， useRef 是一個(gè)不錯(cuò)的選擇。例如，您可以使用 useRef 存儲(chǔ)以前的值、緩存值或保留可變值以進(jìn)行比較。

2. useState 用例：

2.1. 管理組件狀態(tài)：當(dāng)您需要管理和更新組件內(nèi)的狀態(tài)時(shí)，建議使用 useState 方法。它提供了一種存儲(chǔ)和更新影響組件 UI 并觸發(fā)重新渲染的值的方法。

2.2. 處理用戶交互：如果組件中有交互元素（例如復(fù)選框、輸入字段或切換開關(guān)），則通常使用 useState 來管理與這些交互相關(guān)的狀態(tài)。您可以根據(jù)用戶輸入更新狀態(tài)并反映 UI 中的更改。

對(duì)比示例：

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

假設(shè)我們有一個(gè)帶有輸入字段和提交按鈕的表單。當(dāng)用戶單擊提交按鈕時(shí)，我們希望在不清除輸入字段的情況下顯示成功消息。

使用 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 創(chuàng)建對(duì)輸入字段的引用。單擊提交按鈕后，我們使用 inputRef.current.value 訪問輸入字段的值并繼續(xù)提交表單。輸入字段的值未清除，因?yàn)槲覀儧]有更新狀態(tài)或觸發(fā)重新渲染。

使用 useState ：

import React, { useState } from 'react';

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

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

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

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

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

在這個(gè)版本中，我們使用 useState 來管理輸入字段的狀態(tài)。我們使用 useState('') 用空字符串初始化 inputValue 狀態(tài)。當(dāng)用戶在輸入字段中鍵入內(nèi)容時(shí)，將調(diào)用 handleInputChange 函數(shù)，更新狀態(tài)并觸發(fā)重新渲染以反映新值。單擊提交按鈕時(shí)，將執(zhí)行 handleSubmit 函數(shù)，該函數(shù)顯示成功消息并通過將 inputValue 狀態(tài)設(shè)置為空字符串來清除輸入字段。

在此示例中， useState 用于管理輸入字段的值并在用戶與其交互時(shí)觸發(fā)重新渲染。 displaySuccessMessage 中的狀態(tài)更新通過更新 inputValue 狀態(tài)來清除輸入字段。

結(jié)論：

總之， useRef 和 useState 都是React中必不可少的鉤子，但它們有不同的用途。 useRef 主要用于訪問和操作 DOM 或存儲(chǔ)可變值而不觸發(fā)重新渲染。它提供了一個(gè)在組件呈現(xiàn)之間持續(xù)存在的可變引用。另一方面， useState 用于管理組件狀態(tài)，當(dāng)狀態(tài)更新時(shí)觸發(fā)重新渲染。它返回一個(gè)狀態(tài)值和一個(gè)更新它的函數(shù)。

了解 useRef 和 useState 之間的差異并了解何時(shí)使用每個(gè)鉤子對(duì)于編寫有效且優(yōu)化的 React 組件至關(guān)重要。通過正確利用 useRef 和 useState ，您可以使用 React 構(gòu)建交互式和高性能應(yīng)用程序。

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

最新評(píng)論