ReactJS - 使用 useState：初学者指南

你好，未来的 React 开发者们！我很高兴能成为你们在这个激动人心的 React 钩子世界中的向导，特别是 useState 钩子。作为一个教编程多年的老师，我可以告诉你，理解状态管理就像学习骑自行车一样——一开始可能有点不稳定，但一旦你掌握了它，你将能轻松地在你的 React 项目中快速前进！

useState 是什么，我们为什么需要它？

在我们深入了解之前，让我们先谈谈为什么我们首先需要 useState。想象你正在构建一个简单的计数器应用。你想要显示一个数字，并且有按钮来增加或减少它。你该如何跟踪当前的计数？这就是 useState 的用武之地！

useState 是一个 React 钩子，它允许我们为函数式组件添加状态。这就像给你的组件一个记忆，以便在渲染之间记住事物。

useState 的特点

让我们分解 useState 的关键特点：

特点	描述
为函数式组件添加状态	useState 允许我们在函数式组件中使用状态，这在之前只能通过类组件实现。
返回一个数组	useState 返回一个包含两个元素的数组：当前的状态值和一个更新它的函数。
可以持有任何类型的值	状态可以是数字、字符串、布尔值、对象、数组或任何其他 JavaScript 类型。
触发重新渲染	当状态更新时，它会触发组件重新渲染，反映新的状态。

现在我们知道了 useState 的能力，让我们看看它是如何工作的！

应用状态钩子

让我们从一个简单的例子开始——我们的计数器应用。以下是如何使用 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}的计数` : '计数'}: {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 的世界中，唯一不变的定律就是状态的变化！

Credits: Image by storyset