1. 核⼼概念（为什么需要 useState）
在 React 组件中，我们经常需要管理⼀些"可变数据"，⽐如计数器的数值、输⼊框的内容、弹窗的
显⽰/隐藏状态等。这些数据被称为"状态（state）"，⽽ useState 是 React 提供的**最基础、最常
⽤的状态钩⼦（Hook）**，⽤于在函数组件中管理状态。
useState 的核⼼作⽤：
• 存储组件内部的可变数据（状态）；
•提供修改状态的⽅法（setState 函数）；
• 状态发⽣改变时，组件会**⾃动重新渲染**，实现"数据驱动视图"（⽆需⼿动操作 DOM，React
⾃动更新⻚⾯）。
补充：Hook 是 React 16.8 新增的特性，只能在函数组件中使⽤，不能在类组件或普通函数中使⽤， 且必须在组件的最顶层（不能在 if、for 循环、嵌套函数中使⽤）。
2. 语法详解
// 1. 第⼀步：从 react 中导⼊ useState（必须导⼊，否则⽆法使⽤）
import { useState } from "react";
function App() {
// 2. 语法：const [状态变量, 修改状态的函数] = useState(初始值);
// 解构赋值：左侧第⼀个变量是状态名（⾃定义，如 count、inputVal），第⼆个是修改状态的
函数（约定俗成：set+状态名，如 setCount、setInputVal）
const [count, setCount] = useState(0);
// 3. 使⽤状态和修改状态
const addCount = () => {
// 调⽤ setCount 函数，修改 count 的值
setCount(count + 1);
};
return (
<div>
<h2>当前计数：{count}</h2> {/* ⽤ {} 读取状态变量 */}
<button onClick={addCount}>+1</button>
</div>
);
}
export default App;语法细节补充：
• 初始值：可以是任意类型（数字、字符串、布尔值、对象、数组等），如 useState(0)、
useState("")、useState(false)、useState({ name: "张三" })；
• 状态变量：只读！不能直接修改状态变量（如 count++、count = 10 都是错误的），必须通过
setCount 函数修改；
• 修改状态的函数：setCount 是异步函数（后续会详细讲解），调⽤后不会⽴即更新状态，⽽是加
⼊ React 的更新队列，批量更新。
3. 不同类型状态的使⽤⽰例（全覆盖）
useState ⽀持所有类型的状态，以下是⼊⻔常⽤的 4 种类型，结合⽰例讲解，覆盖⼤部分基础场景。
（1）数字类型（如计数器、评分）
import { useState } from "react";
function Counter() {
// 初始值为 0，数字类型
const [count, setCount] = useState(0);
return (
<div style={{ padding: "20px" }}>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)} disabled={count <=
0}>-1</button> {/* 计数为 0 时禁⽤减号 */}
<button onClick={() => setCount(0)}>重置</button>
</div>
);
}
export default Counter;（2）字符串类型（如输⼊框内容、⽂本提⽰）
import { useState } from "react";
function InputDemo() {
// 初始值为空字符串，存储输⼊框内容
const [inputVal, setInputVal] = useState("");
// 监听输⼊框变化，同步更新状态
const handleInputChange = (e) => {
setInputVal(e.target.value);
};
return (
<div style={{ padding: "20px" }}>
<input
type="text"
value={inputVal} {/* 状态绑定输⼊框，实现"双向绑定" */}
onChange={handleInputChange}
placeholder="请输⼊内容"
style={{ padding: "5px" }}
/>
<p>你输⼊的内容：{inputVal || "暂⽆输⼊"}</p>
</div>
);
}
export default InputDemo;（3）布尔类型（如弹窗显⽰/隐藏、开关状态）
import { useState } from "react";
function ModalDemo() {
// 初始值为 false，控制弹窗是否显⽰（false：隐藏，true：显⽰）
const [isModalShow, setIsModalShow] = useState(false);
return (
<div style={{ padding: "20px" }}>
<button onClick={() => setIsModalShow(true)}>打开弹窗</button>
{/* 弹窗：根据 isModalShow 状态显⽰/隐藏 */}
{isModalShow && (
<div style={{
position: "fixed",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "300px",
height: "200px",
border: "1px solid #ccc",
background: "#fff",
padding: "20px"
}}>
<h3>弹窗标题</h3>
<p>这是⼀个弹窗，由布尔状态控制显⽰/隐藏</p>
<button onClick={() => setIsModalShow(false)}>关闭弹窗</button>
</div>
)}
</div>
);
}
export default ModalDemo;（4）对象类型（如⽤⼾信息、表单多字段）
当需要管理多个相关联的数据时，可使⽤对象类型状态，修改时需注意：**必须返回⼀个新的对象**，
不能直接修改原对象（否则组件不会重新渲染）。
import { useState } from "react";
function UserForm() {
// 初始值为对象，存储⽤⼾信息（姓名、年龄、性别）
const [userInfo, setUserInfo] = useState({
name: "",
age: "",
gender: "male"
});
// 修改姓名
const handleNameChange = (e) => {
// 错误写法：userInfo.name = e.target.value（直接修改原对象，组件不渲染）
// 正确写法：⽤展开运算符 ... 复制原对象，再修改指定属性，返回新对象
setUserInfo({ ...userInfo, name: e.target.value });
};
// 修改年龄
const handleAgeChange = (e) => {
setUserInfo({ ...userInfo, age: e.target.value });
};
// 修改性别
const handleGenderChange = (e) => {
setUserInfo({ ...userInfo, gender: e.target.value });
};
return (
<div style={{ padding: "20px" }}>
<div style={{ margin: "10px 0" }}>
姓名：<input type="text" value={userInfo.name} onChange=
{handleNameChange} />
</div>
<div style={{ margin: "10px 0" }}>
年龄：<input type="number" value={userInfo.age} onChange=
{handleAgeChange} />
</div>
<div style={{ margin: "10px 0" }}>
性别：
<input type="radio" name="gender" value="male" checked={userInfo.gender
=== "male"} onChange={handleGenderChange} /> 男
<input type="radio" name="gender" value="female" checked=
{userInfo.gender === "female"} onChange={handleGenderChange} /> ⼥
</div>
<p>⽤⼾信息：{JSON.stringify(userInfo)}</p>
</div>
);
}
export default UserForm;4. 状态更新的异步性（重点难点）
React 中，setCount、setInputVal 等修改状态的函数是**异步执⾏**的，这意味着：调⽤修改函数
后，不能⽴即获取到最新的状态值，因为 React 会批量处理状态更新，提升性能。
⽰例（异步问题演⽰）：
import { useState } from "react";
function AsyncDemo() {
const [count, setCount] = useState(0);
const addCount = () => {
setCount(count + 1);
console.log("当前计数：", count); // 输出的是旧值，不是更新后的值（异步问题）
};
return (
<div>
<p>计数：{count}</p>
<button onClick={addCount}>+1</button>
</div>
);
}
export default AsyncDemo;解决⽅法：使⽤**函数式更新**（将⼀个函数传递给 setCount），函数的参数是上⼀次的状态值
（prevState），可以确保获取到最新的状态。
import { useState } from "react";
function AsyncDemo() {
const [count, setCount] = useState(0);
const addCount = () => {
// 函数式更新：prevState 是上⼀次的状态值（最新值）
setCount((prevState) => {
const newCount = prevState + 1;
console.log("当前计数：", newCount); // 输出更新后的值
return newCount;
});
};
return (
<div>
<p>计数：{count}</p>
<button onClick={addCount}>+1</button>
</div>
);
}
export default AsyncDemo;总结：当状态更新依赖于上⼀次的状态时（如 count++、count *= 2），必须使⽤函数式更新；如果是
独⽴的状态更新（如 setCount(10)），可直接使⽤普通更新。
5. 多个状态的使⽤
⼀个组件中可以使⽤多个 useState，分别管理不同的状态，互不影响，使代码更清晰、易于维护。
代码块
import { useState } from "react";
function MultiStateDemo() {
// 多个状态：分别管理计数、输⼊框内容、弹窗显⽰状态
const [count, setCount] = useState(0);
const [inputVal, setInputVal] = useState("");
const [isShow, setIsShow] = useState(false);
return (
<div style={{ padding: "20px" }}>
<p>计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<input
type="text"
value={inputVal}
onChange={(e) => setInputVal(e.target.value)}
placeholder="请输⼊内容"
style={{ margin: "10px 0" }}
/>
<button onClick={() => setIsShow(!isShow)}>
{isShow ? "隐藏⽂本" : "显⽰⽂本"}
</button>
{isShow && <p>这是通过多个状态控制的⽂本</p>}
</div>
);
}
export default MultiStateDemo;6. 常⻅易错点（避坑指南）
• 易错点1：直接修改状态变量 → 错误！如 count++、userInfo.name = "李四"，会导致状态更新失
败，组件不重新渲染，正确写法是使⽤ setCount、setUserInfo 函数；
• 易错点2：状态更新后⽴即获取最新值 → 错误！因状态更新是异步的，需使⽤函数式更新才能获取
最新值；
• 易错点3：useState 初始值只执⾏⼀次 → 组件重新渲染时，useState(初始值) 不会再次执⾏，初始
值仅在组件⾸次渲染时⽣效；
• 易错点4：对象/数组状态修改时，未返回新对象/新数组 → 错误！如 setUserInfo(userInfo)（传递
原对象），组件不会重新渲染，正确写法是⽤展开运算符复制后修改。