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

让我们分解一下：

1. 我们从React中导入了useState。
2. 在我们的Counter函数中，我们调用了useState(0)。这创建了一个状态变量count，初始化为0，以及一个函数setCount来更新它。
3. 我们在一个段落中显示当前的count。
4. 当按钮被点击时，我们调用setCount(count + 1)来增加计数。

每次你点击按钮，React都会用更新后的计数重新渲染组件。这就像魔法一样，不是吗？

在Expense Manager应用中引入状态

现在我们已经湿了脚，让我们用一个更实际的例子来深入探讨——一个费用管理应用。我们将创建一个允许用户添加费用的组件。

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

哇，这信息量有点大！让我们分解一下：

1. 我们有三个状态变量：

• expenses：一个数组，用于存储所有费用
• newExpense：一个字符串，用于新费用的名称
• newAmount：一个字符串，用于新费用的金额

2. addExpense函数：

• 检查newExpense和newAmount是否都不为空
• 将一个新的费用对象添加到expenses数组中
• 清空输入字段

3. 在JSX中：

• 我们有两个输入字段，一个用于费用名称，一个用于金额
• 一个按钮用于添加费用
• 一个列表显示所有费用

记得我之前提到的沙堡吗？这就好比有一个沙盒，你可以随时添加新的城堡（费用）。每个城堡都有一个名字和大小（金额），你可以看到下面列出了所有城堡。

方法表格

这里有一张我们使用过的方法的便捷表格：

方法	描述
useState	创建一个状态变量和用于更新它的函数
setExpenses	更新费用数组
setNewExpense	更新新费用的字符串
setNewAmount	更新新金额的字符串
map	通过对数组中的每个元素调用一个函数来创建一个新数组

结论

恭喜你！你已经迈出了使用React Hooks进行状态管理的第一步。我们学习了如何创建有状态的组件，更新状态，甚至构建了一个迷你费用管理应用。

记住，学习React就像建造沙堡——从小开始，不断尝试，不要害怕推翻重来。通过练习，你很快就能构建出复杂且精美的应用。

继续编码，继续学习，最重要的是，玩得开心！下次见，这是你友善的计算机科学老师告别。快乐Reacting！

Credits: Image by storyset