课程目录
状态管理快速入门
React 状态管理是构建交互式用户界面的核心概念。本课程将带你从基础到高级，全面掌握 React 状态管理技术。
官方资源
- React 官方文档 - 状态和生命周期 - React 状态管理官方指南
- React Hooks 文档 - 完整的 Hooks API 参考
- React Context 文档 - Context API 详细文档
- React 最佳实践 - React 开发最佳实践指南
什么是状态管理？
状态管理是指在应用程序中管理数据流动和存储的方式。在 React 中，状态是组件的"记忆"，决定了组件的渲染结果。
状态 vs 属性
| 特性 | State (状态) | Props (属性) |
|---|---|---|
| 可变性 | 组件内部可修改 | 只读，由父组件传递 |
| 作用范围 | 组件内部 | 组件间传递 |
| 更新触发 | setState 调用 | 父组件重新渲染 |
| 数据流向 | 向下流动 | 单向流动 |
为什么需要状态管理？
- 用户交互：响应用户的点击、输入等操作
- 数据持久化：在组件重新渲染时保持数据
- 条件渲染：根据状态显示不同的 UI
- 数据共享：在组件间共享数据
React 状态管理的发展历程
1. 组件内部状态 (useState)
1
2
3
4
5
// 最基础的状态管理
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}jsx
2. 状态提升 (Lifting State Up)
1
2
3
4
5
6
7
8
9
10
// 将状态提升到共同父组件
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<ChildA count={count} onIncrement={setCount} />
<ChildB count={count} onDecrement={setCount} />
</div>
);
}jsx
3. Context API
1
2
3
4
5
6
7
8
9
10
11
// 跨组件共享状态
const ThemeContext = createContext();
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Header />
<Content />
</ThemeContext.Provider>
);
}jsx
4. 第三方状态管理库
- Nano Store：轻量级状态管理库
- Redux：可预测的状态容器
- Zustand：轻量级状态管理
- Jotai：原子化状态管理
- Recoil：Facebook 的状态管理库
本课程涵盖内容
- useState 深度解析 - 掌握 React 的基础状态管理
- useEffect 和副作用 - 理解副作用和数据获取
- 状态提升和 Context - 学习组件间状态共享
- 最佳实践 - 避免常见陷阱和性能优化
- 实战项目 - 构建完整的状态管理应用
学习目标
完成本课程后，你将能够：
- ✅ 理解 React 状态管理的核心概念
- ✅ 熟练使用 useState 和 useEffect
- ✅ 掌握状态提升和 Context API
- ✅ 避免常见的状态管理陷阱
- ✅ 选择合适的状态管理方案
- ✅ 构建可维护的状态管理架构
开始学习
让我们从最基础的 useState Hook 开始，探索 React 状态管理的奥秘！
1 / 6