React 进阶指南：状态管理进化——从 Context 到 Redux Toolkit（第五篇）

本系列文章将带你系统掌握 React 18+，从 JavaScript 基础到生产级应用开发。这是第五篇，我们将剖析 React 状态管理的演进之路，帮你理清何时用 Context、何时用 Redux Toolkit，以及如何选择现代状态管理方案。

引言：状态管理的"灵魂拷问"

当我们从简单的 Todo 应用迈向复杂的企业级后台时，一个无法回避的问题出现了：状态管理到底该怎么搞？

组件之间共享状态，层层传递 props 太痛苦（Prop Drilling）。
全局主题、用户信息、权限数据需要随处访问。
复杂表单状态、异步请求、缓存数据交织在一起。

React 官方提供了 Context API，它能解决一部分问题。但当应用规模进一步扩大，状态逻辑愈发复杂时，我们需要更强大的工具------Redux Toolkit（RTK） 以及更轻量的 Zustand 等现代方案。

今天这篇文章，我们将沿着状态管理的进化路线，从"原始社会"一路走到"工业时代"，帮你掌握每一种方案的核心思想与适用场景。本文最后还会提供一份清晰的决策指南，让你在真实项目中不再纠结。

第一部分：状态管理的演变------为什么需要这些工具？

在 React 早期，组件通信只有两种方式：Props（父传子） 和 回调函数（子传父） 。对于深度嵌套的组件，这种传递方式很快演变为"Prop Drilling"（属性钻取）------一个中间组件要帮忙传递它根本不需要的 props。

为了解决这个问题，社区先后出现了 Flux、Redux、MobX 等架构。React 16.3 官方推出了 Context API，让数据跨层级传递变得简单。但随着应用复杂度提升，Context 自身的局限性（性能问题、缺乏中间件、调试困难）又催生了 Redux Toolkit 等"更重"但更完善的方案。

状态管理方案的"光谱"

方案	复杂度	适用规模	特点
组件内 State	低	单个组件	最基础，无需额外工具
Props 传递	低	父子、祖孙（层级少）	适合简单应用
Context API	中	中小型应用	内置，轻量，但性能有坑
Redux Toolkit	高	大型复杂应用	可预测、工具链完整、生态丰富
Zustand / Jotai	中	中大型应用	轻量、API 简洁、性能优秀

第二部分：Context API ------ 官方内置的"跨组件数据总线"

基本用法

Context 由三部分组成：React.createContext、Provider 和 useContext。

jsx

javascript 复制代码

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

// 2. Provider 提供值
function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Main />
    </ThemeContext.Provider>
  )
}

// 3. 消费 Context
function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext)
  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}
            onClick={() => setTheme(prev => prev === 'light' ? 'dark' : 'light')}>
      切换主题
    </button>
  )
}

进阶模式：Provider 封装 + 自定义 Hook

为了更好的封装性和类型安全，通常会将 Provider 和自定义 Hook 打包导出：

jsx

javascript 复制代码

// contexts/ThemeContext.jsx
import { createContext, useContext, useState, useMemo } from 'react'

const ThemeContext = createContext(null)

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

export function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider')
  }
  return context
}

Context 的三大缺陷（为什么它不够用）

重新渲染陷阱 ：Provider 的 value 每次变化时，所有消费该 Context 的组件都会强制重新渲染，即使它们只使用了其中一部分数据。解决办法是用 useMemo 缓存 value，或拆分多个细粒度的 Context。
没有中间件支持：无法处理异步 action、日志、持久化等。
调试困难：Context 的变化在 DevTools 中难以追踪，不如 Redux DevTools 强大。

何时使用 Context？

主题切换、国际化（i18n）、用户认证信息等低频变化、全局共享的数据。
中小型应用，团队对 Redux 学习成本敏感。

第三部分：useReducer ------ 内置的状态机

在引入外部库之前，React 提供了 useReducer，它是 useState 的升级版，适用于状态逻辑复杂且包含多个子值的场景。

jsx

javascript 复制代码

import { useReducer } from 'react'

const initialState = { count: 0 }

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return { count: 0 }
    default:
      throw new Error()
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </>
  )
}

useReducer 非常适合表单验证、购物车、分页器等局部复杂状态 。但如果状态需要在多个组件间共享，就需要配合 Context 一起使用------这就是 Context + useReducer 组合模式。

第四部分：Redux Toolkit ------ 企业级状态管理的"标准答案"

Redux 是 React 生态中最古老、最成熟的状态管理库。但它的原始用法（手动写 reducer、action type、action creator）过于繁琐，因此官方推出了 Redux Toolkit（RTK） 作为推荐的编写方式。

Redux 核心三原则

单一数据源：整个应用的状态存在一个对象树中（store）。
状态只读：唯一修改状态的方式是触发 action。
使用纯函数执行修改：reducer 接收旧 state 和 action，返回新 state。

安装与配置

bash

bash 复制代码

npm install @reduxjs/toolkit react-redux

创建 Slice（切片）

Slice 是 Redux Toolkit 的核心概念，它将 reducer、action 和 action type 打包在一起，大大减少了样板代码。

jsx

javascript 复制代码

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1   // ✅ 使用 Immer 可以直接"修改"状态
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// 自动生成 action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

配置 Store

jsx

typescript 复制代码

// store/index.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'
import userReducer from './userSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer,
  },
})

// 导出 RootState 和 AppDispatch 类型（用于 TS）
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

在 React 中使用

用 <Provider> 包裹应用，然后在组件中用 useSelector 和 useDispatch。

jsx

javascript 复制代码

// main.jsx
import { Provider } from 'react-redux'
import { store } from './store'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

jsx

javascript 复制代码

// components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement, incrementByAmount } from '../store/counterSlice'

function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  )
}

异步数据处理（createAsyncThunk）

异步请求是状态管理的重头戏。RTK 提供了 createAsyncThunk 来处理异步 action：

jsx

javascript 复制代码

// store/userSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

// 创建异步 thunk
export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    const response = await axios.get('/api/users')
    return response.data
  }
)

const userSlice = createSlice({
  name: 'users',
  initialState: { list: [], loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false
        state.list = action.payload
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false
        state.error = action.error.message
      })
  },
})

export default userSlice.reducer

在组件中触发异步 action：

jsx

javascript 复制代码

import { useDispatch, useSelector } from 'react-redux'
import { fetchUsers } from '../store/userSlice'
import { useEffect } from 'react'

function UserList() {
  const dispatch = useDispatch()
  const { list, loading, error } = useSelector((state) => state.users)
  
  useEffect(() => {
    dispatch(fetchUsers())
  }, [dispatch])
  
  if (loading) return <div>加载中...</div>
  if (error) return <div>错误：{error}</div>
  return <ul>{list.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

第五部分：Redux Toolkit 的高级功能

实体适配器（Entity Adapter）

针对 CRUD 操作，RTK 提供了 createEntityAdapter 来管理集合类型状态：

jsx

php 复制代码

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'

const usersAdapter = createEntityAdapter()

const initialState = usersAdapter.getInitialState({ loading: false })

const userSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    addUser: usersAdapter.addOne,
    updateUser: usersAdapter.updateOne,
    removeUser: usersAdapter.removeOne,
    addMany: usersAdapter.addMany,
  },
})

// selector 自动生成
export const { selectAll: selectAllUsers, selectById: selectUserById } = 
  usersAdapter.getSelectors((state) => state.users)

中间件与监听器

RTK 内置了 Redux Thunk 中间件，并支持自定义监听器（createListenerMiddleware），用于处理副作用（如请求失败后自动重试、日志记录等）。

第六部分：现代轻量级方案 ------ Zustand 入门

如果你的项目不需要 Redux 那么重的架构，但又不满足于 Context，那么 Zustand 是一个绝佳的选择。

特点

极简 API，无 boilerplate
无需 Provider，直接 import store
支持 TypeScript 完美
性能优秀，按需选择更新

简单示例

bash

复制代码

npm install zustand

jsx

javascript 复制代码

// store/useBearStore.js
import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

// 在组件中使用
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)
  return <button onClick={increase}>{bears} bears</button>
}

与 Redux 对比

维度	Redux Toolkit	Zustand
学习曲线	较陡（需理解 reducer、action、middleware）	极平缓
样板代码	较少（相比原生 Redux 已大幅减少）	极少
性能优化	需手动用 useSelector 和 memo	自动按需更新
生态工具	Redux DevTools 强大	有 DevTools 但较弱
适用场景	大型团队、复杂交互、需要时间旅行调试	中小型项目、个人项目、快速原型

第七部分：决策指南------我到底该用哪个？

面对这么多选择，你可能会困惑。这里提供一个简单的决策框架：

1. 首先评估你的应用规模

单个组件内部状态 → useState / useReducer（无需任何库）。
少数组件共享（层级浅） → Props 提升（Lifting State Up）。
跨层级共享（主题、用户、语言） → Context API。
复杂业务逻辑、大量异步操作、多模块状态 → Redux Toolkit。
中等规模，想要轻量且开发体验好 → Zustand 或 Jotai。

2. 考虑团队协作与工具链

Redux Toolkit 有严格的约定，适合团队合作和长期维护。
Zustand 更灵活，适合快速迭代或单人项目。

3. 性能敏感度

Context 的重新渲染问题在大规模应用中可能成为瓶颈。
Redux 和 Zustand 都通过细粒度选择器避免不必要的渲染。

4. 最终决策矩阵

场景	推荐方案
简单全局状态（主题、语言）	Context + useMemo
复杂组件内部状态（表单、分页）	useReducer
中大型 CRUD 应用	Redux Toolkit + RTK Query
实时数据、缓存需求	RTK Query 或 TanStack Query
追求极致轻量	Zustand

第八部分：现代化数据获取 ------ RTK Query 与 TanStack Query

状态管理不仅包括"客户端状态"，还包括"服务器状态"（从 API 获取的数据）。现代方案倾向于将两者分离：

RTK Query：Redux Toolkit 官方提供的数据获取库，自动管理缓存、重试、轮询。
TanStack Query（原 React Query） ：独立的数据获取库，与状态管理解耦，可与任何状态管理方案配合。

示例（RTK Query） ：

jsx

css 复制代码

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
    }),
  }),
})

export const { useGetPostsQuery, useAddPostMutation } = api

在组件中自动处理 loading/error 状态，并支持缓存和重新验证。

总结

今天我们走过了 React 状态管理的进化之路：

Context API：内置方案，适合轻量共享，但要注意性能。
useReducer：复杂局部状态的好帮手。
Redux Toolkit：企业级标准，功能完备，生态强大。
Zustand：轻量现代替代品，API 简洁。
RTK Query / TanStack Query：服务器状态管理的未来方向。

核心建议：不要一开始就上 Redux。从 Context 开始，当应用变得复杂、状态逻辑难以维护时，再迁移到 RTK。对于新项目，Zustand 是一个很好的起点。