ReactJS - 使用 useState：初學者指南

你好，未來的 React 開發者們！我很興奮能成為你們在 React hooks 世界的導遊，特別是 useState hook。作為一個教導編程多年的老師，我可以告訴你們，理解狀態管理就像學習騎自行車一樣 - 起初可能會有些晃晃悠悠，但一旦你們掌握了要領，你們就會輕鬆地在 React 專案中飛馳！

useState 是什麼，我們為什麼需要它？

在我們深入細節之前，讓我們先討論一下為什麼我們需要 useState。想像一下你正在建立一個簡單的計數器應用。你想要顯示一個數字，並且有按鈕來增加或減少它。你該如何跟蹤當前的計數？這就是 useState 登場的地方！

useState 是一個 React hook，它讓我們能夠在我們的功能組件中添加狀態。這就像給你的組件一個記憶，讓它在渲染之間記住事物。

useState 的特性

讓我們分解一下 useState 的關鍵特性：

特性	描述
在功能組件中添加狀態	useState 讓我們能在功能組件中使用狀態，這在以前只能在大組件中實現。
返回一個數組	useState 返回一個包含兩個元素的數組：當前的狀態值和一個用來更新它的函數。
可以保存任何類型的值	狀態可以是數字、字符串、布爾值、對象、數組或任何其他 JavaScript 類型。
觸發重新渲染	當狀態更新時，它會導致組件重新渲染，反映新的狀態。

既然我們知道了 useState 的能力，讓我們來看看它是如何操作的！

使用狀態 Hook

讓我們從一個簡單的例子開始 - 我們的計數器應用。以下是如何使用 useState 來實現它：

import React, { useState } from 'react';

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

return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
點我
</button>
</div>
);
}

讓我們來分解這個過程：

1. 我們從 React 中導入 useState。
2. 在我們的組件中，我們調用 useState(0)。這創建了一個名為 count 的狀態變量，初始值為 0。
3. useState 返回一個數組，我們將它解構為 count（當前狀態）和 setCount（一個用來更新狀態的函數）。
4. 在我們的 JSX 中，我們顯示當前的計數並創建一個按鈕，當點擊時，會調用 setCount 來增加計數。

每次按鈕被點擊，setCount 會被調用，更新狀態並觸發我們組件的重新渲染，以顯示新的計數值。

多個狀態變量

useState 的美妙之處在於，你可以在單個組件中多次使用它。讓我們擴展我們的計數器來包括一個名稱：

function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="輸入你的名字"
/>
<p>{name ? `${name}'s 計數` : '計數'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
增加
</button>
</div>
);
}

在這裡，我們使用了兩次 useState - 一次為我們的計數，一次為名稱輸入。每個狀態變量都是完全獨立的，讓我們能夠輕鬆地管理多個狀態。

使用對象作為狀態

當使用多個 useState 調用對於獨立狀態非常好時，有時將相關狀態組合在對象中會更方便。讓我們看看我們如何做到這一點：

function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};

return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="名字"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="年齡"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="愛好"
/>
<p>
{user.name} 是 {user.age} 歲並且喜歡 {user.hobby}。
</p>
</div>
);
}

在這個例子中，我們使用單個 useState 調用來管理具有多個屬性的對象。handleChange 函數使用展開運算符 (...) 來創建一個具有所有以前屬性的新對象，然後更新發生變化的特定屬性。

當處理表單或任何有關多個相關狀態的情況時，這種方法非常有用。

警告

當使用對象（或數組）作為狀態時，請記住總是要在更新狀態時創建一個新對象，而不是直接修改已存在的對象。React 使用引用相等性來確定狀態是否已經改變，所以直接修改對象的屬性不會觸發重新渲染。

結論

好了，各位！我們一起穿越了 useState 的領地，從簡單的計數器到複雜的對象狀態管理。記住，就像任何新技能一樣，精通 useState 需要練習。如果它立即沒有吸引你，不要氣餒 - 繼續實驗，很快你就能像專家一樣管理狀態！

在我們分道揚鋌之前，這裡是對我們所學的快速回顧：

1. useState 讓我們能夠在功能組件中添加狀態。
2. 它返回一個包含當前狀態和更新函數的數組。
3. 我們可以在獨立狀態上多次使用 useState。
4. 對象可以用作狀態以組合相關數據。
5. 在更新對象狀態時，總是要創建新對象。

現在去創建有狀態的 React 應用程序吧！並記住，在 React 的世界中，唯一的常量就是變化（狀態的變化）！

Credits: Image by storyset