React 中的 useState 是什么？实用示例解析

Source: Dev.to

什么是 useState？

useState 是一个 React Hook，允许函数组件管理状态。它返回一个状态变量和一个设置函数。当调用设置函数时，React 会使用更新后的状态重新渲染组件。

基本语法

const [state, setState] = useState(initialValue);

• state → 当前值
• setState → 用于更新该值的函数
• initialValue → 初始值

为什么需要 useState？

当状态改变时，React 组件会重新渲染。

没有状态时：

• 没有动态 UI
• 无法处理用户交互
• 无法处理表单
• 没有切换功能

状态让你的 UI 变得交互式。

示例 1：计数器

import { useState } from "react";

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

  return (
    
      
## Count: {count}

       setCount(count + 1)}>Increment
    
  );
}

export default Counter;

这里发生了什么？

• 初始值为 0。
• 当按钮被点击时，执行 setCount(count + 1)。
• React 更新状态。
• 组件重新渲染。
• UI 自动更新。

示例 2：切换按钮

import { useState } from "react";

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    
      
## {isOn ? "Light ON 💡" : "Light OFF 🌙"}

       setIsOn(!isOn)}>Toggle
    
  );
}

• false → 初始状态。
• 点击按钮会翻转该值。
• UI 立即更新。

常见用法

• 暗黑模式切换
• 显示/隐藏密码
• 下拉菜单
• 模态框打开/关闭