ReactJS - 使用 React Hooks 進行狀態管理
你好，未來的 React 開發者們！今天，我們將踏上一段令人興奮的旅程，進入使用 React Hooks 進行狀態管理的世界。作為你們親切友善的計算機科學老師，我非常高興能夠引導你們進行這次冒險。如果你是編程新手，別擔心——我們會一步步來，不久之後，你將會像專家一樣管理狀態！
React 中的狀態是什麼？
在我們深入細節之前，讓我們先了解在 React 中「狀態」是什麼意思。想像你正在建造一座沙堡。你沙堡當前的形狀和大小就是它的「狀態」。當你添加或移除沙子時，你沙堡的狀態就會改變。同樣地，在 React 中，狀態代表了一個組件當前的狀況——它在任何給定時刻的數據、外觀或行為。
讓我們認識 React Hooks
現在，讓我們來谈谈 React Hooks。可以把 hooks 想像成神奇的工具，它們賦予你的組件超能力。它們讓函數組件能夠擁有狀態以及其他 React 功能，而不需要寫類。我們今天將專注的 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>
);
}讓我們來分解這段代碼：
- 我們從 React 中導入
useState。 - 在我們的
Counter函數中，我們調用useState(0)。這創建了一個名為count的狀態變量，初始化為 0，以及一個名為setCount的函數來更新它。 - 我們在一段段落中顯示當前的
count。 - 當按鈕被點擊時，我們調用
setCount(count + 1)來增加計數。
每次你點擊按鈕，React 都會重新渲染組件以顯示更新後的計數。這就像魔法一樣，不是嗎？
在開銷管理應用中引入狀態
現在我們已經熱身了，讓我們深入一個更實際的例子——一個開銷管理應用。我們將創建一個允許用戶添加開銷的組件。
import React, { useState } from 'react';
function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');
const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};
return (
<div>
<h2>開銷管理器</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="開銷名稱"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="金額"
/>
<button onClick={addExpense}>添加開銷</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}哇，這有很多東西要消化！讓我們來分解它：
- 我們有三個狀態變量：
-
expenses：一個用於存儲所有開銷的數組 -
newExpense：一個用於新開銷名稱的字符串 -
newAmount：一個用於新開銷金額的字符串
-
addExpense函數：
- 檢查
newExpense和newAmount是否都不為空 - 將一個新的開銷對象添加到
expenses數組中 - 清空輸入字段
- 在 JSX 中：
- 我們有兩個輸入字段，分別用於開銷名稱和金額
- 一個添加開銷的按鈕
- 一個列出所有開銷的列表
記得我之前提到過沙堡嗎？這就像是一個沙盒，你可以隨時添加新的城堡（開銷）。每個城堡都有一個名稱和大小（金額），你可以看到下面列出所有你的城堡。
方法表
這裡有一個我們使用過的方法的便捷表格：
| 方法 | 描述 |
|---|---|
| useState | 創建一個狀態變量和一個用於更新它的函數 |
| setExpenses | 更新開銷數組 |
| setNewExpense | 更新新開銷名稱的字符串 |
| setNewAmount | 更新新開銷金額的字符串 |
| map | 通過對數組中的每個元素調用一個函數來創建一個新的數組 |
結論
恭喜你！你剛剛踏出了使用 React Hooks 進行狀態管理世界的第一步。我們學會了如何創建有狀態的組件、更新狀態，甚至建立了一個小型的開銷管理應用。
記住，學習 React 就像建造沙堡一樣——從小做起，實驗，並不怕拆掉重來。隨著練習，你會很快建造出複雜而美麗的應用程序。
持續編程，持續學習，最重要的是，玩得開心！直到下次見，這裡是你的親切友善的計算機科學老師告別。祝你使用 React 樂趣無窮！
Credits: Image by storyset