ReactuseState教程：创建计数器并验证状态更新

在前端开发内容学习中，React useState教程：创建计数器并验证状态更新是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

完成效果预览：点击按钮后计数器数字会重新渲染

useState 的学习目标不是背 API，而是能做出一个可验证的小功能。本文的验收结果很明确：页面显示当前数字，点击按钮后数字增加，React 重新渲染组件，界面展示最新状态。

如果你已经能创建 React 项目，可以直接在现有练习项目中新建组件；如果还没有项目，先用 Vite 或 Create React App 创建一个最小 React 项目，再把下面的组件放进去运行。

在 React 函数组件中引入并声明 useState 状态

引入 useState 并声明状态

useState 是 React 内置 Hook，用于给函数组件添加内部状态。最常见的写法是从 React 中引入 useState，再在组件函数内部调用它。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

count 是当前状态值，setCount 是更新状态的函数，0 是初始值。变量名可以自己定义，但建议保持“状态值 + set状态值”的命名形式，这样后续维护更清楚。

创建计数器页面结构

有了状态以后，需要把它渲染到页面上。可以先写一个标题、一个数字展示区和一个按钮，让页面结构足够简单，方便观察每次点击后的变化。

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <section>
      <h2>计数器</h2>
      <p>当前数字：{count}</p>
      <button>加 1</button>
    </section>
  );
}

这一步还没有绑定点击事件，所以按钮不会改变数字。先确认页面能正常显示，再继续写事件逻辑，可以减少同时排查多个问题的麻烦。

绑定点击事件并更新状态

按钮点击时不要直接写 count = count + 1，因为 React 状态必须通过更新函数触发重新渲染。正确做法是调用 setCount。

<button onClick={() => setCount(count + 1)}>
  加 1
</button>

如果更新依赖上一次状态，更稳妥的写法是函数式更新：

<button onClick={() => setCount(prev => prev + 1)}>
  加 1
</button>

函数式更新能拿到上一轮状态值，适合连续点击、定时器或多个更新可能合并的场景。入门练习建议直接使用这种写法，避免以后遇到闭包旧值问题。

编写按钮事件并调用 setState 更新计数器

运行组件并验证状态更新

把 Counter 组件挂到页面后启动开发服务，在浏览器中点击按钮。每点击一次，页面数字应该增加 1。如果终端没有报错，但页面不变，优先检查按钮是否绑定了 onClick，以及事件处理函数里是否调用了 setCount。

还可以临时在组件中加入 console.log(count)，观察每次渲染时的值。这里需要注意，调用 setCount 后不要马上期待下一行代码读到新值，因为状态更新会在下一次渲染中体现。

验证 useState 更新后的页面渲染结果

避免直接修改状态

useState 管理对象或数组时，不能直接修改原对象后再传回去。例如数组追加元素时，不建议先 list.push(item)，而是创建新数组：

setList(prev => [...prev, newItem]);

React 依赖状态引用变化判断是否需要更新。直接改原对象容易导致界面不刷新，也会让调试变得困难。计数器虽然只是数字，但养成不可变更新习惯很重要。

useState 常见错误排查

如果页面提示 Hook 调用位置错误，检查 useState 是否写在组件函数最外层。Hook 不能写在普通函数、条件语句、循环或 class 组件里。每次渲染时 Hook 调用顺序必须稳定。

如果状态值看起来慢一拍，通常是因为你在调用 setCount 后立即读取旧的 count。需要根据最新状态执行副作用时，可以使用 useEffect 监听状态变化。

下一步练习建议

完成计数器后，可以继续做三个小练习：用 useState 控制输入框内容、用 useState 切换弹窗显示隐藏、用 useState 保存待办事项数组。它们覆盖数字、字符串、布尔值和数组四种常见状态类型。

当你能独立完成这些练习，并能解释为什么要通过 setState 函数更新状态时，useState 的基础用法就算真正掌握了。