掌握 React 的 useState Hook：基礎知識與進階用例-js教程-PHP中文網

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

DDD

發布： 2024-12-20 00:10:09

原創

346 人瀏覽過

Mastering React

React 中的 useState Hook

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

什麼是 useState？

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

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

文法

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') 的新陣列。

要避免的常見陷阱

直接修改狀態：切勿直接修改狀態（例如，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>
  );
};

登入後複製