## 📚 技术栈背景 | Tech Stack & Context
- 列出所有的相关技术/语言
- [[public/CODE/React|React]]
- [[TypeScript]]
- 主题：一句话总结这张卡片讲解了什么？
- React 中什么是 State、何时该用它、以及如何用 `useState` 管理组件状态
- 相关文档
- [State: A Component's Memory – React v19.1](https://react.dev/learn/state-a-components-memory)
- [State and Lifecycle – React V18.2.0](https://legacy.reactjs.org/docs/state-and-lifecycle.html)
## 🧩 相关场景 | Context
- 契机：为什么现在写它？
-
- 作用：它解决了什么问题？
- 让组件拥有“记忆”和“响应性”。
- 应用场景：你未来会在什么地方用到它？
- 表单输入
- 页面交互（比如按钮点击次数）
- 控制 UI 状态（loading 状态、是否显示弹窗等）
## 🔑 基本概念 | Key
### What is State？
- State 就是 **组件内部“记住”的值**，每次渲染都会基于它来生成 UI。
- 它是 React 中响应式的核心——**只要 state 变了，组件就会重新渲染**。
特点：
- 内部的（不会通过 props 传递进来）
- 会变的（由用户行为或异步事件改变）
- 无法从别的变量推导（必须单独“记住”）
[[#1. 如何判断一个值是否应该是 State？]]
### useState
- What is useState?
- useState 是一个 [[React中的Hook|Hook]]
- Why we need useState?
1. 记住变量：A **state variable** to retain the data between renders.
2. 更新变量：A **state setter function** to update the variable and trigger React to render the component again.
- 语法：
```jsx
const [state, setState] = useState(initialValue);
```
- 含义：当你调用 `useState(initialValue)` 时，React会返回一个包含两个元素的数组：
- state：当前的状态值 current value
- setState：一个 function，用于更新 state
- initialValue：初始值
- state, setState 需要自己取名，见 [[React中的命名规范#状态变量 State Variables]]
- 规则
- 只能在组件顶层使用 Hooks（不能在循环、条件或嵌套函数中使用）
## 🔄 工作流程 | Flow
### 总体流程
1. 明确哪些变量需要用 state 保存
2. 在组件中使用 `useState()` 初始化这个状态
3. 当用户操作或数据变化时，调用 `setState()` 触发更新
4. React 自动重新渲染组件，UI 和状态同步
### 详细步骤
#### 1. 如何判断一个值是否应该是 State？
- 同时满足以下 3 个条件，就应该用 state
- 内部 internal：组件内部的
- props 传进来的值，明显不是 state
- 变化 changing：随着用户操作而变化的
- 不会变的静态值，直接写 const
- 最小 minimal：不能从其他 state 或 props 计算得出
- 能通过其他变量计算得到的，就不是 state
- 特殊情况
- 组件初始化时生成的随机值（希望它在整个生命周期内保持不变）
```tsx
const [id] = useState(() => generateUUID());
```
- 想“记住”初始值用于对比或重置的场景（比如表单初始值）
- 为什么？因为组件每次 render 都会重新执行函数体，普通变量会被重算，而 state 能帮你记住这个值。
#### 2. 在组件中使用 `useState()` 初始化状态
在组件的最上方引入并调用：
```js
import { useState } from 'react'
function MyComponent() {
const [count, setCount] = useState(0)
}
```
- `count` 是当前状态值
- `setCount` 是更新状态的函数
- `0` 是初始值（可以是任意类型）
你可以为多个值分别定义 state，也可以用一个对象/数组一次性管理多个字段。
#### 3. 在交互或逻辑中调用 `setState()` 触发更新
状态变更触发通常有以下几种场景：
- 输入框变更（onChange）
- 点击按钮（onClick）
- 组件加载完成后初始化状态
示例：
```js
<button onClick={() => setCount(count + 1)}>+1</button>
```
注意：
- 不要直接修改 state，例如不要写 `count++` 或 `count = 10`
- set 函数本身是异步的，不能立即读取到更新后的值（如果需要立刻操作，考虑用 `useEffect`）
## 🤔 常见问题 / 提示 | Tips