React中的useState 和useEffect
useState 和 useEffect是 React 中最常用的两个 Hook。
一、useState：给组件添加"记忆小本本"
想象你的组件是个健忘的人，useState 就是给它一个记事本，让它能记住一些事情（数据）。
基本用法：
import { useState } from 'react';function Counter() {// count 是当前记住的值// setCount 是修改这个值的方法const [count, setCount] = useState(0); // 初始值设为0return (<div><p>你点击了 {count} 次</p><button onClick={() => setCount(count + 1)}>点我加一</button></div>);
}
关键点解释：
useState(初始值)：创建一个"记忆单元"，比如useState(0)就是记一个数字，初始为0- 返回数组：
[当前值, 修改函数]，通常用解构语法获取：const [count, setCount] = useState(0); - 修改状态：必须用
setCount函数修改，直接改count无效！ - 重新渲染：每次调用
setCount，组件都会自动刷新显示最新值
实际类比：
| 代码 | 现实类比 |
|---|---|
useState(0) | 买一个笔记本，第一页写"0" |
count | 翻开笔记本看到当前数字 |
setCount(5) | 用笔把数字改成5 |
| 组件重新渲染 | 把新数字大声念出来 |
二、useEffect：组件的"生活管家"
想象你的组件有日常生活（显示内容），但还需要做额外的事（比如取数据、设定时器）。useEffect 就是它的生活管家，帮它处理这些"副业"。
基本结构：
useEffect(() => {// 这里写要执行的"副业任务"return () => { // 可选：这里写清理任务（比如关定时器）};
}, [依赖项]); // 控制执行时机的"任务清单"
三种常用模式：
1. 每次渲染后都执行（新手慎用）
useEffect(() => {console.log("我每次渲染都会跑！");
}); // 注意：没有依赖项数组
2. 只在首次加载执行（类似 componentDidMount）
useEffect(() => {console.log("我只在组件出生时执行一次");// 清理函数（类似 componentWillUnmount）return () => console.log("组件销毁时执行");
}, []); // 空依赖数组
3. 当特定数据变化时执行（类似 componentDidUpdate）
const [user, setUser] = useState(null);useEffect(() => {if(user) {console.log(`用户变成：${user.name}`);}
}, [user]); // 监听 user 的变化
三、真实场景演示
场景：用户计数器 + 实时显示窗口大小
import { useState, useEffect } from 'react';function SmartComponent() {// 状态1：计数const [count, setCount] = useState(0);// 状态2：窗口宽度const [width, setWidth] = useState(window.innerWidth);// 副作用1：监听窗口变化useEffect(() => {const handleResize = () => setWidth(window.innerWidth);window.addEventListener('resize', handleResize);// 清理函数：组件卸载时移除监听return () => window.removeEventListener('resize', handleResize);}, []); // 空数组：只运行一次// 副作用2：计数变化时修改标题useEffect(() => {document.title = `点了${count}次`;}, [count]); // 依赖 countreturn (<div><button onClick={() => setCount(c => c + 1)}>点击计数 ({count})</button><p>窗口宽度: {width}px</p></div>);
}
四、核心口诀总结
| Hook | 作用 | 重要规则 |
|---|---|---|
useState | 让组件记住数据 | 必须用 setXxx 修改状态 |
useEffect | 处理副作用操作 | 清理函数防止内存泄漏 |
| 依赖数组控制执行时机 |
五、常见问题解答
Q：为什么有时候 useEffect 会无限循环？
A：因为没有正确设置依赖数组。比如你在 effect 里修改了依赖项的状态，就会循环触发。
Q：useState 可以存对象吗？
A：可以！useState({ name: 'John' })，但更新时要创建新对象：
setUser({ ...user, age: 30 }); // 正确！展开旧对象
Q：多个 useEffect 会按什么顺序执行？
A：按代码书写顺序执行，类似队列。
现在你已掌握了 React 最核心的两个 Hook！记住这个比喻：
useState是组件的 笔记本（存储数据）useEffect是组件的 秘书（处理杂事）
接下来可以尝试写个小项目巩固理解，比如：待办清单（用 useState 存列表） + 数据持久化（用 useEffect 存 localStorage）