ai-coding-demo

什么是状态管理？

📖 概述

状态管理是前端应用架构中的核心概念，指的是管理应用中所有可变数据和状态变化的方式。随着应用复杂度增加，组件间共享状态变得越来越困难，需要专门的解决方案来统一管理状态。

🌟 为什么需要状态管理

问题场景

多个组件需要共享同一数据
组件层级嵌套较深，数据传递困难
状态变化难以追踪和调试
异步操作处理复杂

💡 解决方案

1. Context API（React）

// 创建 Context
const ThemeContext = React.createContext()

// 提供者
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value=>
      {children}
    </ThemeContext.Provider>
  )
}

// 消费者
function Component() {
  const { theme, setTheme } = useContext(ThemeContext)
  return (
    <button onClick={() => setTheme('dark')}>
      当前主题: {theme}
    </button>
  )
}

2. Redux

// Action
const increment = () => ({ type: 'INCREMENT' })

// Reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    default:
      return state
  }
}

// Store
const store = createStore(counterReducer)

// Dispatch
store.dispatch(increment())

3. Zustand

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}))

// 在组件中使用
function Counter() {
  const { count, increment } = useStore()
  return <button onClick={increment}>{count}</button>
}

4. React Query

import { useQuery } from 'react-query'

function FetchData() {
  const { data, error, isLoading } = useQuery('todos', fetchTodos)

  if (isLoading) return 'Loading...'
  if (error) return 'Error!'

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

📦 常见状态管理库

React 生态

Redux：最成熟、功能最全
Zustand：轻量、简洁
MobX：响应式编程
Recoil：Facebook 出品
Jotai：原子化状态管理

Vue 生态

Vuex：Vue 官方状态管理
Pinia：Vue 3 推荐的状态库

通用

XState：有限状态机
Valtio：基于 Proxy 的状态管理

🎯 核心概念

Store

存储应用状态的地方

Action

描述状态变化的意图

Reducer

根据 Action 更新状态的纯函数

Middleware

在 Action 和 Reducer 之间处理副作用

Selector

从 Store 中选择特定数据

Immutable

状态不可直接修改，通过拷贝更新

✅ 优缺点对比

Context API

✅ 简单、无需额外依赖
❌ 性能问题（大应用）
❌ 调试工具缺乏

Redux

✅ 成熟稳定、生态完善
✅ 强大的调试工具
❌ 样板代码多
❌ 学习曲线陡峭

Zustand

✅ 轻量、API 简洁
✅ TypeScript 支持好
❌ 生态较小
❌ 相对较新

🎯 选择指南

小型项目：Context API 或 useState
中型项目：Zustand 或 Recoil
大型复杂项目：Redux Toolkit
服务器状态：React Query 或 SWR

📚 学习资源

🔗 相关链接

在线预览：State Management Demo
状态可视化：Redux DevTools

This site is open source. Improve this page.