useState 状态钩子

最后更新：2026-10-28

useState 为函数组件添加状态变量：返回「当前值」与「更新函数」，状态变化即触发组件重渲染。任何随交互变化的界面数据——输入框内容、开关、计数——都由它管理。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

const [count, setCount] = useState(0)
//    ↑ 当前值  ↑ 更新函数      ↑ 初始值（仅首次渲染生效）

initialState	初始状态。只在首次渲染时作为当前值，之后的渲染会忽略它。
setCount（更新函数）\| setter	更新函数：传入新值或「基于前值」的函数，调用后触发重渲染。

返回值：返回长度为 2 的数组：[当前状态值, 更新函数]。通常用数组解构命名，更新函数约定以 set 开头。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

页面居中显示「当前计数：0」与三个按钮。点 +1 计数变 1、2、3…；点 -1 递减；点「重置」回到 0。

💡 提示 更新函数命名约定以 set 开头（setCount / setOpen），团队代码一眼可读。

⚠️ 注意 直接修改状态变量（count = 5）不会触发重渲染——必须调用更新函数。

ℹ️ 说明 初始值只在首次渲染生效；之后改变初始值表达式也不会重置状态。

更多案例整理中，敬请期待。

Q 为什么修改 state 后打印还是旧值？

Q useState 的初始值可以是函数吗？

Q 一个组件能有多个 useState 吗？

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。