React从基础入门到高级实战：React 核心技术 - React 状态管理：Context 与 Redux

EndingCoder2025-05-30 17:35

React 状态管理：Context 与 Redux

在 React 应用开发中，状态管理是构建复杂交互界面的核心技术。随着应用规模的增长，开发者需要高效地管理共享数据、处理异步操作并确保代码的可维护性。React 生态提供了多种状态管理工具：从内置的 Context API 到强大的 Redux ，再到轻量级的 Zustand 和现代的 React Query，每种工具都有其独特优势和适用场景。

本文旨在为需要管理复杂状态的开发者提供全面指南。我们将深入探讨 Context API 的全局状态管理、Redux 的核心概念与配置、Redux Toolkit 的简化实践、Zustand 的轻量级方案，以及 React Query 在异步状态同步中的应用。此外，通过一个购物车案例和多语言切换练习，你将掌握这些工具的实际用法，并学会根据项目需求选择合适的方案。

文章目标

  • 理解 Context API 在全局状态管理中的应用及其局限性。
  • 掌握 Redux 的核心概念（Store、Reducer、Action）及配置方法。
  • 学会使用 Redux Toolkit 简化 Redux 开发流程。
  • 探索 Zustand 作为轻量级状态管理方案的优势。
  • 了解 React Query 在 2025 年状态管理趋势中的角色。
  • 通过购物车案例和多语言切换练习，巩固理论知识。
  • 对比不同工具的适用场景，助力开发者做出明智选择。

1. Context API：创建与使用全局状态

1.1 什么是 Context API？

Context API 是 React 内置的一种状态管理机制，允许开发者在组件树中共享数据，而无需通过 Props 逐层传递。它特别适合管理全局状态，例如用户认证信息、主题设置或语言偏好。

通俗比喻：Context 就像一个"公共广播系统"。父组件（Provider）通过广播发送数据，所有子组件（Consumer）都可以接收并使用这些数据，无需中间组件手动传递。

1.2 Context API 的基本使用

Context API 的使用分为三个步骤：

  1. 创建 Context ：使用 createContext 创建一个 Context 对象。
  2. 提供数据 ：在父组件中使用 Provider 组件提供数据。
  3. 消费数据 ：在子组件中使用 useContext Hook 或 Consumer 组件访问数据。

代码示例：

js 复制代码 
import { createContext, useContext, useState } from 'react';

// 创建 Context
const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  return (
    // 提供数据
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <Button />;
}

function Button() {
  // 消费数据
  const theme = useContext(ThemeContext);
  return (
    <button
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      主题按钮
    </button>
  );
}
  • createContext('light')：创建 Context，默认值为 'light'。
  • <ThemeContext.Provider value={theme}>：提供主题数据。
  • useContext(ThemeContext)：在深层组件中访问主题值。

1.3 Context API 的优缺点

优点：

  • 无需额外安装，直接内置于 React。
  • 使用简单，适合管理全局、静态或不频繁更新的状态。
  • 减少 Props 穿透（Prop Drilling），提升代码可读性。

缺点：

  • 当状态频繁更新时，Context 的变化会触发所有消费它的组件重新渲染，可能导致性能问题。
  • 不适合处理复杂的异步操作或多模块状态逻辑。

适用场景：

  • 管理主题切换、语言设置、用户认证等全局状态。
  • 小型到中型应用，状态逻辑较简单时。

2. Redux 基础：Store、Reducer、Action

2.1 什么是 Redux？

Redux 是一个开源的状态管理库，专为 JavaScript 应用设计，在 React 生态中尤为流行。它的核心思想是将应用的状态集中存储在一个单一的 Store 中，通过 Action 和 Reducer 更新状态，确保数据流向清晰且可预测。

通俗比喻：Redux 就像一个"中央银行"。所有资金（状态）都存放在这里，任何交易（状态更新）都必须通过严格的审批流程（Action 和 Reducer）。

2.2 Redux 的核心概念

  • Store：存储应用状态的单一容器，类似于一个全局对象。
  • Action ：描述状态变化的纯对象，必须包含 type 字段，通常还包括 payload（数据）。
  • Reducer：纯函数，接收旧状态和 Action，计算并返回新状态。

工作流程：

  1. 用户操作触发一个 Action（例如点击按钮）。
  2. Store 接收 Action 并将其传递给 Reducer。
  3. Reducer 根据 Action 的类型更新状态。
  4. Store 保存新状态并通知订阅的组件更新。

代码示例：

js 复制代码 
import { createStore } from 'redux';

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

// 创建 Store
const store = createStore(counterReducer);

// 定义 Action
const increment = { type: 'INCREMENT' };
const decrement = { type: 'DECREMENT' };

// 分发 Action
store.dispatch(increment); // 状态变为 { count: 1 }
store.dispatch(decrement); // 状态变为 { count: 0 }

2.3 Redux 与 React 的集成

在 React 中，我们使用 react-redux 库将 Redux Store 连接到组件。

安装：

bash 复制代码 
npm install redux react-redux

代码示例：

js 复制代码 
import { Provider, useSelector, useDispatch } from 'react-redux';
import { createStore } from 'redux';

// Reducer 和 Store 配置同上
const store = createStore(counterReducer);

// 根组件提供 Store
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

// 组件中使用状态和 dispatch
function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>加 1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>减 1</button>
    </div>
  );
}
  • <Provider store={store}>：将 Store 注入应用。
  • useSelector：从 Store 中读取状态。
  • useDispatch：获取 dispatch 函数，用于发送 Action。

2.4 Redux 的优缺点

优点：

  • 状态集中管理，便于调试和测试。
  • 支持异步操作（通过 middleware，如 redux-thunk）。
  • 数据流向清晰，增强代码可预测性。

缺点：

  • 样板代码较多，配置复杂。
  • 学习曲线较陡峭，尤其是初学者。
  • 在小型应用中可能显得过于重量级。

适用场景：

  • 大型应用，需要严格的状态管理和可预测性。
  • 涉及复杂的业务逻辑和异步操作。

3. Redux Toolkit：简化 Redux 配置

3.1 什么是 Redux Toolkit？

Redux Toolkit（简称 RTK）是 Redux 官方推荐的工具集，旨在简化 Redux 的开发流程。它集成了 Redux 核心、Immer（不可变状态库）、Redux Thunk（异步处理）等功能，提供现代化的 API，大幅减少样板代码。

3.2 Redux Toolkit 的核心特性

  • createSlice：自动生成 Action 和 Reducer，简化状态逻辑。
  • configureStore：简化 Store 配置，默认支持 DevTools 和 middleware。
  • createAsyncThunk：处理异步操作，内置状态管理（pending、fulfilled、rejected）。

3.3 使用 Redux Toolkit

安装：

bash 复制代码 
npm install @reduxjs/toolkit react-redux

代码示例：

js 复制代码 
import { createSlice, configureStore } from '@reduxjs/toolkit';

// 创建 Slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

// 导出 Action
export const { increment, decrement } = counterSlice.actions;

// 配置 Store
const store = configureStore({
  reducer: counterSlice.reducer,
});

// 在组件中使用
import { Provider, useSelector, useDispatch } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>加 1</button>
      <button onClick={() => dispatch(decrement())}>减 1</button>
    </div>
  );
}
  • createSlice：定义状态和操作，内置 Immer 支持直接修改 state。
  • configureStore：自动配置 Redux DevTools 和 Thunk middleware。
  • increment() 和 decrement()：自动生成的 Action 创建函数。

3.4 Redux Toolkit 的优势

  • 减少样板代码：无需手动定义 Action 类型和 Reducer 分支。
  • 内置 Immer：直接修改 state，无需手动处理不可变性。
  • 异步支持 ：createAsyncThunk 简化异步逻辑。

适用场景：

  • 所有使用 Redux 的项目，RTK 已成为 Redux 的标准配置方式。

4. Zustand 简介：轻量级状态管理方案

4.1 什么是 Zustand？

Zustand 是一个轻量级的状态管理库，专为 React 设计。它提供简洁的 API，支持全局状态管理、异步操作和自定义 Hook，特别适合中小型应用或希望减少依赖的项目。

4.2 Zustand 的基本使用

安装：

bash 复制代码 
npm install zustand

代码示例：

js 复制代码 
import create from 'zustand';

// 创建 Store
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, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>加 1</button>
      <button onClick={decrement}>减 1</button>
    </div>
  );
}
  • create：创建 Store，定义状态和更新函数。
  • useStore：Hook，用于在组件中访问 Store。

4.3 Zustand 的优势

  • 轻量级：API 简单，包体积小，适合快速开发。
  • 灵活性：支持异步操作、中间件和自定义 Hook。
  • 无样板代码：直接在 Store 中定义状态和方法。

适用场景：

  • 中小型应用，不需要 Redux 的复杂功能。
  • 希望快速实现全局状态管理的项目。

5. 2025 年趋势：React Query 的状态同步

5.1 什么是 React Query？

React Query 是一个专注于异步状态管理的库，特别适用于数据获取、缓存和同步。它提供了强大的 Hook（如 useQuery 和 useMutation），让开发者轻松处理 API 请求、加载状态和错误管理。

5.2 React Query 的基本使用

安装：

bash 复制代码 
npm install @tanstack/react-query

代码示例：

js 复制代码 
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <UserList />
    </QueryClientProvider>
  );
}

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then((res) => res.json()),
  });

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>错误: {error.message}</p>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
  • useQuery：自动管理数据获取、缓存和状态。
  • queryKey：唯一标识查询。
  • queryFn：异步函数，返回数据。

5.3 React Query 的优势

  • 自动缓存：减少重复请求，提升性能。
  • 内置状态管理：提供加载和错误状态，简化 UI 逻辑。
  • 与 Redux 解耦：专注于异步状态，可与 Context 或 Redux 结合。

适用场景：

  • API 密集型应用，需要频繁与后端交互。
  • 希望简化异步逻辑和状态管理的项目。

6. 实践案例：购物车状态管理

我们将通过一个购物车案例，展示如何使用 Context API 和 Redux Toolkit 实现状态管理。

6.1 使用 Context API

代码示例：

js 复制代码 
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart((prev) => [...prev, product]);
  };

  const removeFromCart = (id) => {
    setCart((prev) => prev.filter((item) => item.id !== id));
  };

  return (
    <CartContext.Provider value={{ cart, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  );
}

function useCart() {
  return useContext(CartContext);
}

function Cart() {
  const { cart, removeFromCart } = useCart();

  return (
    <div>
      <h2>购物车</h2>
      <ul>
        {cart.map((item) => (
          <li key={item.id}>
            {item.name}{' '}
            <button onClick={() => removeFromCart(item.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const { addToCart } = useCart();
  return (
    <div>
      <Cart />
      <button onClick={() => addToCart({ id: 1, name: '商品 1' })}>
        添加商品 1
      </button>
    </div>
  );
}

function Root() {
  return (
    <CartProvider>
      <App />
    </CartProvider>
  );
}
  • CartProvider：提供购物车状态和操作方法。
  • useCart：自定义 Hook，方便消费 Context。

6.2 使用 Redux Toolkit

代码示例：

js 复制代码 
import { createSlice, configureStore } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: [],
  reducers: {
    addToCart: (state, action) => {
      state.push(action.payload);
    },
    removeFromCart: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
  },
});

export const { addToCart, removeFromCart } = cartSlice.actions;

const store = configureStore({
  reducer: {
    cart: cartSlice.reducer,
  },
});

import { Provider, useSelector, useDispatch } from 'react-redux';

function Cart() {
  const cart = useSelector((state) => state.cart);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>购物车</h2>
      <ul>
        {cart.map((item) => (
          <li key={item.id}>
            {item.name}{' '}
            <button onClick={() => dispatch(removeFromCart(item.id))}>
              删除
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const dispatch = useDispatch();
  return (
    <div>
      <Cart />
      <button onClick={() => dispatch(addToCart({ id: 1, name: '商品 1' }))}>
        添加商品 1
      </button>
    </div>
  );
}

function Root() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}
  • createSlice：定义购物车状态和操作。
  • useSelector 和 useDispatch：访问状态和分发 Action。

7. 练习：实现多语言切换功能

请实现一个多语言切换功能，要求：

  • 使用 Context API 管理语言状态。
  • 支持中文和英文切换。
  • 在页面中显示当前语言的文本。

参考实现

js 复制代码 
import { createContext, useContext, useState } from 'react';

const LanguageContext = createContext('zh');

const translations = {
  zh: { welcome: '欢迎', language: '中文' },
  en: { welcome: 'Welcome', language: 'English' },
};

function LanguageProvider({ children }) {
  const [language, setLanguage] = useState('zh');

  return (
    <LanguageContext.Provider
      value={{ language, setLanguage, t: translations[language] }}
    >
      {children}
    </LanguageContext.Provider>
  );
}

function useLanguage() {
  return useContext(LanguageContext);
}

function App() {
  const { language, setLanguage, t } = useLanguage();

  return (
    <div>
      <h1>{t.welcome}</h1>
      <p>当前语言: {t.language}</p>
      <button onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}>
        切换语言
      </button>
    </div>
  );
}

function Root() {
  return (
    <LanguageProvider>
      <App />
    </LanguageProvider>
  );
}
  • LanguageProvider：提供语言状态和翻译数据。
  • useLanguage：自定义 Hook，访问语言 Context。
  • translations：存储不同语言的文本。

8. 不同工具的适用场景对比

工具 优点 缺点 适用场景
Context API 内置、简单、无需依赖 频繁更新可能导致性能问题 全局、静态或不频繁更新的状态
Redux 集中管理、支持异步、可预测性强 样板代码多、配置复杂 大型应用、复杂状态逻辑
Redux Toolkit 简化 Redux 配置、集成 Immer 学习曲线较陡 中大型应用、需要严格状态管理
Zustand 轻量、灵活、无样板代码 功能相对简单 中小型应用、快速开发
React Query 自动缓存、异步状态管理 专注于数据获取，不管理全局状态 API 密集型应用、异步状态同步

选择建议：

  • Context API：适合简单的全局状态管理，如主题或语言设置。
  • Redux / Redux Toolkit：适合大型应用，需要严格的状态控制和异步操作。
  • Zustand：适合中小型应用，追求开发效率和简洁性。
  • React Query：适合 API 密集型应用，专注于异步数据管理。

9. 总结

状态管理是 React 开发中的关键技术。Context API 提供简单的全局状态管理，Redux 和 Redux Toolkit 适合复杂的大型应用，Zustand 轻量灵活，而 React Query 则在异步状态管理中独树一帜。开发者应根据项目规模、状态复杂度以及异步需求选择合适的工具。

希望这篇指南能为你提供全面的状态管理知识！如有疑问，欢迎交流。

相关推荐
长存祈月心15 小时前
Rust 迭代器适配器
java·服务器·前端
先树立一个小目标15 小时前
puppeteer生成PDF实践
前端·javascript·pdf
冲刺逆向16 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
啃火龙果的兔子16 小时前
Promise.all和Promise.race的区别
前端
马达加斯加D16 小时前
Web身份认证 --- OAuth授权机制
前端
2401_8370885016 小时前
Error:Failed to load resource: the server responded with a status of 401 ()
开发语言·前端·javascript
全栈师16 小时前
LigerUI下frm与grid的交互
java·前端·数据库
叫我詹躲躲16 小时前
被前端存储坑到崩溃？IndexedDB 高效用法帮你少走 90% 弯路
前端·indexeddb
无尽夏_16 小时前
CSS3(前端基础)
前端·css·1024程序员节
温宇飞16 小时前
Next.js 简述 - React 全栈框架
前端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09jdk21下载、安装（Windows、Linux、macOS）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）