掌握 React 的 useState Hook：基礎知識與進階用例

React 中的 useState Hook

useState 鉤子是 React 中最常用的鉤子之一。它允許您向功能組件添加狀態。在引入鉤子之前，狀態只能在類別元件中使用，但 useState 也允許您在功能元件中擁有狀態。這使得功能組件更加強大和靈活。

什麼是 useState？

useState 是一個可讓您在功能元件中宣告狀態變數的函數。它傳回一個包含兩個元素的陣列：

1. 目前狀態值 — 您可以在元件中存取和顯示的實際狀態值。
2. 更新狀態的函數 - 允許您變更狀態變數值的函數。

文法

const [state, setState] = useState(initialState);

• state 是目前狀態值。
• setState 是用來更新狀態的函數。
• initialState 是元件首次渲染時狀態的初始值。

用法範例

基本範例：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

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

export default Counter;

• 說明：
  • useState(0) 將初始計數值設為 0。
  • setCount 用於在單擊按鈕時更新計數，這會觸發使用更新後的計數重新渲染。

使用功能更新：

當新的狀態依賴先前的狀態時，可以將一個函數傳遞給setState。這可確保更新是根據最新的狀態值進行的。

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• 說明： 這裡，prevCount 是先前的狀態值，函數會根據該值傳回新的狀態。

多狀態變數：

您可以在元件內多次使用 useState 來管理不同的狀態。

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

• 說明：這裡，兩個單獨的狀態變數（計數和名稱）是獨立管理的。

延遲初始化

如果初始狀態很複雜或需要計算，您可以將函數傳遞給 useState，該函數僅在元件首次渲染時運行。

const [state, setState] = useState(initialState);

• 說明：如果您想根據初始渲染期間需要計算一次的計算或副作用來初始化狀態，此技術非常有用。

使用物件或陣列更新狀態

如果您的狀態是物件或數組，則 setState 函數僅更新您提供的狀態的特定部分。 React 不執行深度合併，因此如果您想要變更狀態物件的任何部分，則需要明確更新整個狀態物件。

更新物件狀態：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

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

export default Counter;

• 說明： setUser 用於透過傳播先前的狀態並更改 name 屬性來更新狀態物件。

更新陣列狀態：

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• 解釋： 我們使用擴充運算子 (...prevItems) 建立一個包含先前項目和新項目 ('orange') 的新陣列。

要避免的常見陷阱

1. 直接修改狀態：切勿直接修改狀態（例如，state = newState）。始終使用 setState 函數來確保 React 正確更新 DOM。

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

1. 狀態更新是非同步的：React 批次狀態更新，這表示呼叫 setState 後狀態可能不會立即更新。當使用先前的狀態來計算新的狀態時，這一點尤其重要。

使用狀態總結：

• useState 允許您將狀態新增至功能元件。
• 它傳回一個陣列：目前狀態和更新它的函數。
• 初始狀態可以是一個值（如數字、字串或布林值）或物件/陣列。
• 您可以使用多個 useState 呼叫來管理元件內的不同狀態。
• 狀態更新是非同步的，永遠不應該直接完成。

結論

useState 鉤子是 React 中用於管理元件狀態的基本建構塊。它使功能組件能夠擁有自己的本地狀態，使程式碼更加模組化且更易於理解。透過使用 useState，您可以建立響應用戶輸入或事件的動態和互動式元件。

---

以上是掌握 React 的 useState Hook：基礎知識與進階用例的詳細內容。更多資訊請關注PHP中文網其他相關文章！