React 学习指南 - 第十六天 🚀

主题：React 状态管理（Context API vs Redux）

在 React 开发中，状态管理是核心问题之一。今天，我们将对比 Context API 和 Redux，并学习如何在不同场景下选择合适的状态管理方案。

1. 什么是状态管理？

在 React 组件中，状态（state）用于存储组件的数据，并在 UI 发生变化时触发重新渲染。

状态管理的几种方式

2. 使用 useState 管理组件状态

useState 适用于管理组件内部的状态：

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

✅ 适用于组件自身的数据，但当多个组件需要共享状态时，useState 可能会变得难以维护。

3. Context API：轻量级全局状态管理

Context API 适用于少量全局状态，如用户信息、主题颜色、语言设置等。

3.1 创建全局 Context

import { createContext, useContext, useState } from "react";

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

// 提供 Context
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 使用 Context
function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      切换主题（当前：{theme}）
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeToggle />
    </ThemeProvider>
  );
}

export default App;

✅ createContext() 创建全局上下文
✅ useContext(ThemeContext) 获取 theme 和 setTheme
✅ 适用于小型全局状态，避免 prop drilling（属性层层传递）

⚠️ 缺点：如果状态复杂，Context API 会导致组件重复渲染，影响性能。

4. Redux：复杂状态管理

Redux 适用于大型应用，它提供了集中式状态管理，并能记录状态变化。

4.1 安装 Redux

npm install redux react-redux @reduxjs/toolkit

4.2 创建 Redux Store

import { configureStore, createSlice } from "@reduxjs/toolkit";
import { Provider, useDispatch, useSelector } from "react-redux";

// 创建一个 Slice（相当于 Vuex 的 Module）
const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

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

// 创建 Redux Store
const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

// 组件：使用 Redux
function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(decrement())}>-1</button>
    </div>
  );
}

// 组件树包裹 Provider
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

✅ Redux Toolkit 简化了 Redux 开发，避免手写 reducers 和 actions
✅ useSelector() 获取全局状态，useDispatch() 触发更新
✅ 适用于大型应用，有清晰的数据流

⚠️ Redux 缺点：

• 代码较多，初学者上手较难

• 配置繁琐，适合大项目

5. Zustand：更轻量的 Redux 替代方案

Redux 太重？可以试试 Zustand！

5.1 安装 Zustand

npm install zustand

5.2 创建 Zustand Store

import create from "zustand";

// 创建 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}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

export default function App() {
  return <Counter />;
}

✅ 更简洁，没有 Provider，直接 useStore() 获取状态
✅ 性能更好，避免了 Redux 的不必要重渲染
✅ 适用于中等规模应用

6. Context vs Redux vs Zustand

7. 如何选择？

• 组件内部状态 ➝ useState

• 少量全局状态（如用户信息） ➝ Context API

• 复杂全局状态管理 ➝ Redux Toolkit

• 轻量级状态管理 ➝ Zustand