理解 React 中的 useState

Source: Dev.to

useState 解决了什么问题？

在 React 之前，更新屏幕上的内容需要：

• 找到对应的 HTML 元素
• 手动修改它
• 确保其他地方没有被破坏

React 完全改变了这种方式。它的理念是：

“告诉我在某个状态下 UI 应该是什么样子，我会负责更新。”

为此，React 需要一种存储可变数据的方式，这就是 useState 的作用。

useState

useState 是一个 React Hook，能够让组件：

• 保存数据
• 更新该数据
• 当数据变化时自动重新渲染 UI

简而言之，useState 就是 React 记住值的方式。

import { useState } from "react";

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

  return (
    <>
      {count}
      setCount(count + 1)}>+
    </>
  );
}

const [count, setCount] = useState(0); 这行代码的作用

1. 创建一个状态变量 → count
2. 创建一个用于更新它的函数 → setCount
3. 设置初始值 → 0

可以把它想象成后端代码：

let count = 0;

function setCount(newValue) {
  count = newValue;
}

不同之处在于，React 还会自动更新 UI。

与直接变更的区别

❌ 下面的写法 不会 正常工作：

count = count + 1;   // 直接变更

✅ 正确的写法：

setCount(count + 1); // 使用 setter

为什么？
React 通过 setter 函数来追踪状态变化。直接变更会绕过 React，导致不会触发重新渲染。

何时使用 useState

在以下情况下使用 useState：

• 数据会因用户交互而改变
• 当数据改变时 UI 需要随之更新

常见的使用场景：

• 表单输入
• 开关切换
• 计数器
• 加载状态
• 模态框的打开/关闭

useState 让组件能够记住数据并对变化作出响应。先掌握它——后面的内容都建立在此基础之上。