在 React 中，“state”指的是组件内部可以随时间改变的数据。当组件的 state 发生变化时，React 会自动重新渲染该组件以反映新的 state。Hooks 是一些函数，它们允许你从函数组件中“钩入”（hook into）React 的 state 和生命周期特性。
在本实验（lab）中，你将学习如何使用最基础的 Hooks 之一 useState 来管理 React 函数组件中的 state。我们将构建一个简单的计数器应用，以演示如何初始化、显示和更新 state 以响应用户交互。
首先，让我们准备好开发环境。设置脚本已经使用 Vite 在 ~/project/my-app 处为你创建了一个新的 React 项目。
你的第一个任务是安装必要的依赖项并启动开发服务器。在 WebIDE 中打开一个终端，然后逐一运行以下命令。
进入你的项目目录：
cd my-app安装项目依赖项：
npm install启动开发服务器：
npm run dev -- --host 0.0.0.0 --port 8080运行最后一个命令后，你将看到服务器正在运行的输出。现在，你可以通过点击 LabEx 界面中的“Web 8080”标签页来查看你的实时应用。在本实验（lab）中，我们将修改 ~/project/my-app/src/App.jsx 文件。
在这一步，我们将首先从 React 库导入 useState Hook。Hooks 是特殊的函数，要使用它们，你必须先从 react 包中导入它们。
使用 WebIDE 中的文件浏览器，导航到并打开文件 ~/project/my-app/src/App.jsx。
首先，让我们清理默认内容，以便有一个最小化的起点。将 App.jsx 的全部内容替换为以下代码：
function App() {
return (
<>
<h1>React Counter</h1>
</>
);
}
export default App;现在，在文件最顶部添加导入语句，以便在我们的组件中使用 useState Hook。
import { useState } from "react";
function App() {
return (
<>
<h1>React Counter</h1>
</>
);
}
export default App;这行代码告诉 JavaScript 我们想要使用 useState 函数，它是从 'react' 库中导出的一个命名导出。
在这一步，我们将调用 useState Hook 来在我们的组件中创建一个新的 state。
useState 函数接受一个参数：state 的初始值。它返回一个包含两个元素的数组：
我们使用一种叫做“数组解构”（array destructuring）的语法将这两个值放入不同的变量中。约定俗成地将这些变量命名为 [something, setSomething]。
在 App 组件函数内部，return 语句之前，添加以下行来初始化我们的 state。我们将 state 变量命名为 count，并将其初始值设置为 0。
使用以下代码更新你的 ~/project/my-app/src/App.jsx 文件：
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>React Counter</h1>
</>
);
}
export default App;现在，我们的组件拥有了一个名为 count 的 state，其初始值为 0，还有一个 setCount 函数，我们稍后可以使用它来更改其值。
在这一步，我们将把 count state 变量的当前值显示在用户界面中。
在 JSX 中，你可以通过将任何有效的 JavaScript 表达式包裹在花括号 {} 中，直接将其嵌入到你的标记语言里。这允许我们渲染动态数据，例如我们的 state 变量。
让我们添加一个段落 <p> 标签来显示一条包含 count 当前值的信息。
修改 ~/project/my-app/src/App.jsx 文件中 return 语句内的 JSX：
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>React Counter</h1>
<p>The current count is: {count}</p>
</>
);
}
export default App;保存文件后，切换到“Web 8080”标签页。你应该会在页面上看到文本“The current count is: 0”，这证实了我们的初始 state 值正在被正确渲染。
在这一步，我们将定义更新 state 的逻辑。重要的是要记住，你绝不能直接修改 state（例如 count = count + 1）。相反，你必须始终使用 useState 提供的 state 设置器函数，在我们的例子中是 setCount。
调用设置器函数会告知 React state 已发生更改。然后，React 会安排使用新的 state 值重新渲染组件。
让我们在 App 组件内创建一个简单的函数来处理增加计数的逻辑。我们将这个函数命名为 incrementCount。
将 incrementCount 函数添加到你的 ~/project/my-app/src/App.jsx 文件中：
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<>
<h1>React Counter</h1>
<p>The current count is: {count}</p>
</>
);
}
export default App;这个函数在被调用时，会获取当前的 count 值，在其基础上加 1，然后将新值传递给 setCount。这将触发 App 组件的重新渲染。
在最后一步，我们将 state 更新逻辑与用户操作关联起来。我们将在组件中添加一个按钮，当用户点击它时，我们将调用我们在上一步创建的 incrementCount 函数。
在 React 中，你可以通过为 onClick 等特殊属性提供一个函数来处理点击等事件。
让我们在 JSX 中添加一个 <button> 元素，并将其 onClick 处理程序设置为我们的 incrementCount 函数。
使用最终代码更新你的 ~/project/my-app/src/App.jsx 文件：
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<>
<h1>React Counter</h1>
<p>The current count is: {count}</p>
<button onClick={incrementCount}>Increment</button>
</>
);
}
export default App;请注意，我们是将函数本身（incrementCount）传递给 onClick，而不是调用它的结果（incrementCount()）。每当按钮被点击时，React 都会为我们调用这个函数。
现在，切换到“Web 8080”标签页。你应该会看到“Increment”按钮。点击它，观察屏幕上的计数器随着每次点击而增加！
恭喜！你已成功使用 useState Hook 构建了一个有状态的 React 组件。
在本实验中，你学习了现代 React 中 state 管理的基本原则：
react 库导入 useState Hook。useState 来初始化一个 state。{} 在 JSX 中显示 state 变量。理解 useState Hook 是掌握 React 的关键第一步。你现在可以使用这种模式为自己的 React 组件添加动态、交互式行为。
