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>);
}

关键点解释：

1. useState(初始值)：创建一个"记忆单元"，比如 useState(0) 就是记一个数字，初始为0
2. 返回数组：[当前值, 修改函数]，通常用解构语法获取：

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

3. 修改状态：必须用 setCount 函数修改，直接改 count 无效！
4. 重新渲染：每次调用 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）