当前位置：首页 > news >正文

React核心概念：State是什么？如何用useState管理组件自己的数据？

news 来源：原创 2025/6/10 5:17:54

系列回顾：
在上一篇《React入门第一步》中，我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目，并修改了App.jsx组件，让页面显示出我们想要的文字。但是，那个页面是“死”的，它只是静态地展示内容。如果我们想让页面能“动”起来，比如点击一个按钮后，页面上的数字会发生变化，该怎么做呢？

欢迎来到React学习的第二站！

今天，我们要揭开React世界里最神奇的魔法——State (状态)。

什么是State？
简单来说，State就是组件自己内部存储和管理的数据。

想象一下，一个电灯开关，它有两种“状态”：开和关。一个计数器，它的“状态”就是当前的数字。在React中，当一个组件的State发生变化时，React会自动地、高效地重新渲染这个组件，让UI界面更新以反映最新的State。

这就是React的核心思想：你只需要关心如何改变数据 (State)，而不用关心如何操作DOM来更新页面。 React会帮你搞定一切。

而要使用State，我们就需要认识一个React提供的工具，它叫做 useState。

什么是 `useState` Hook？

useState 是React提供的一个内置函数，我们称之为 Hook。Hook可以让你在函数组件里“钩入”React的特性，比如State。

useState 的作用就是：为你的组件添加一个State变量。

实战：创建一个简单的计数器

理论总是枯燥的，让我们通过一个最经典的“计数器”案例，来亲手体验一下 useState 的威力。

第一步：清空并准备 App.jsx

打开我们上一章创建的项目，找到 src/App.jsx 文件。先把它里面的代码清空，替换成下面这个基础结构：

import './App.css'; // 我们暂时保留样式文件function App() {return (<div>{/* 我们将在这里编写计数器代码 */}</div>);
}export default App;

第二步：引入 useState

要想使用 useState，我们必须先从 react 库中把它“请”出来。修改第一行代码：

import { useState } from 'react'; // 从 'react' 导入 useState
import './App.css';

第三步：使用 useState 创建State变量

现在，在 App 函数的内部，return 语句的上面，添加下面这行代码：

function App() {const [count, setCount] = useState(0); // <-- 添加这一行return (// ...);
}

这行代码就是使用useState的精髓，让我们来把它拆解开：

useState(0): 我们调用useState函数，并传入一个参数 0。这个 0 就是我们这个State变量的初始值。也就是说，计数器一开始是从0开始的。
const [count, setCount] = ...: useState会返回一个包含两个元素的数组。我们使用了JavaScript的数组解构赋值语法，把这两个元素分别赋值给了两个变量：
1. count: 这就是我们的State变量。它的值就是当前的状态（在这里就是当前的计数值）。我们可以在JSX中直接使用它来显示。
2. setCount: 这是专门用来更新count值的函数。记住一个铁律：你永远不能直接修改State变量（比如 count = count + 1 是绝对禁止的！），你必须通过这个更新函数来改变它。

第四步：在页面上显示State

现在我们有了count这个State变量，让我们把它显示在页面上。修改return部分的代码：

function App() {const [count, setCount] = useState(0);return (<div><h1>计数器</h1><p>当前的计数值是: {count}</p></div>);
}

保存文件，看看浏览器，页面上是不是已经显示出“当前的计数值是: 0”了？

第五步：创建按钮，并通过更新函数改变State

最后，也是最关键的一步，我们要创建一个按钮，每次点击它时，就调用setCount函数来增加count的值。

继续修改return部分的代码：

function App() {const [count, setCount] = useState(0);// 定义一个事件处理函数const handleIncrease = () => {// 调用更新函数来改变 statesetCount(count + 1); };return (<div><h1>计数器</h1><p>当前的计数值是: {count}</p><button onClick={handleIncrease}>点我 +1</button></div>);
}

代码解释：

我们创建了一个 <button>。
给这个按钮添加了一个 onClick 事件。当按钮被点击时，它会调用我们定义的 handleIncrease 函数。
在 handleIncrease 函数内部，我们调用了 setCount(count + 1)。这行代码告诉React：“请把count这个State的值更新为它当前的值加1”。

现在，保存文件，回到浏览器，疯狂点击那个“点我 +1”按钮吧！

你会看到，每点一次，页面上的数字就会自动增加。我们没有写任何一行DOM操作代码，只是调用了setCount，React就帮我们把页面更新好了。这就是State的魔力！

总结与思考

今天，我们掌握了React中最核心的概念，这是你从静态页面走向动态交互应用的关键一步。让我们回顾一下：

State是什么？ 它是组件内部的数据，当它改变时，UI会自动更新。
useState是什么？ 它是React提供的一个Hook，用来在函数组件中添加和管理State。
如何使用useState？
- 通过 import { useState } from 'react' 引入。
- 调用 const [state变量, 更新函数] = useState(初始值) 来创建。
- 在JSX中使用 {state变量} 来显示数据。
- 在事件处理函数中调用 更新函数(新值) 来改变数据。
铁律： 永远不要直接修改State变量，必须使用它对应的更新函数。