长治网站建设长沙营销网站建设
系列回顾：
在上一篇《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的数组解构赋值语法，把这两个元素分别赋值给了两个变量：count: 这就是我们的State变量。它的值就是当前的状态（在这里就是当前的计数值）。我们可以在JSX中直接使用它来显示。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变量，必须使用它对应的更新函数。
我们现在已经能让一个组件自己管理自己的数据了。但是，如果一个组件需要从它的“父亲”那里获取数据呢？比如，一个UserProfile组件，需要从App组件那里接收用户名和头像地址。
在下一篇文章 《React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？》 中，我们将学习另一个核心概念——Props，掌握组件之间最基本的沟通方式。我们下期不见不散！