🧠 技术专家视角导语
React Native 的组件就像身体的各个器官，状态管理就是让它们“神经通畅”的关键。
这篇文章将从最简单的 useState 开始，逐步带你掌握 useContext、useReducer，再到 Redux —— 构建强健的“状态大脑”。
🪜 第一步：useState —— 独立状态的小神经元
const [count, setCount] = useState(0)
- 使用场景：单个组件内部状态
- 示例：按钮点击计数、开关状态、表单输入
🧩 注意：
setState是异步的，使用后立即读取值会拿到旧值- 可使用函数式更新避免闭包陷阱
🪜 第二步：useContext + useReducer —— 多组件共享状态的“通路”
const CountContext = createContext()
- 使用场景：兄弟组件或嵌套组件之间共享状态
- 示例：登录状态、主题切换、语言包
const reducer = (state, action) => {
switch(action.type) {
case 'increment':
return { count: state.count + 1 }
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 })
📦 搭配 Context.Provider 可以让多个子组件共享这套逻辑
🧠 第三步：Redux —— 处理全局复杂状态的“大脑中枢”
Redux 的核心设计理念：
- 单一状态树
- 不可变状态
- 纯函数 reducer
- 中间件处理副作用（如 redux-thunk, redux-saga）
// actions.js
export const increment = () => ({ type: 'INCREMENT' })
// reducer.js
export default (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT': return { ...state, count: state.count + 1 }
default: return state
}
}
搭配 @reduxjs/toolkit 可以显著简化写法，支持异步逻辑封装、模块化切片等。
✅ 总结 & 推荐路径
| 技术 | 使用场景 | 难度 | 是否推荐 |
|---|---|---|---|
useState | 简单局部状态 | ⭐ | ✅ 必学 |
useContext | 多组件共享简单状态 | ⭐⭐ | ✅ 推荐 |
useReducer | 状态逻辑复杂 | ⭐⭐ | ✅ 推荐 |
Redux | 大型项目全局状态管理 | ⭐⭐⭐ | ✅ 有经验后使用 |
📘 下一篇预告：
👉 《玩转页面跳转：React Navigation 指南，从单页到多页如鱼得水》
