React 学习指南 - 第二十天 🚀

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

在 React 应用中，状态管理是一个核心问题。今天我们来对比三种流行的状态管理方式：Context API、Redux 和 Zustand，帮助你选择最适合你的解决方案。

1. 为什么需要状态管理？

在小型 React 项目中，我们可以直接使用 useState 管理组件内部状态。但随着项目的增长：

• 组件间状态共享变得复杂

• props drilling（父组件需要层层传递 props）导致代码冗余

• 状态更新逻辑分散，难以维护

这时，我们需要全局状态管理工具，来存储和共享应用状态。

2. Context API：适用于小型项目

Context API 是 React 内置的状态管理工具，适合小型项目或少量全局状态（如主题、语言设置、用户信息等）。

示例：使用 Context API 共享主题

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

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

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

// 3. 消费 Context
function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      当前主题：{theme}
    </button>
  );
}

// 4. 使用 Provider 包裹应用
function App() {
  return (
    <ThemeProvider>
      <ThemeSwitcher />
    </ThemeProvider>
  );
}

export default App;

✅ 适用于小型项目
✅ 适合存储全局主题、用户信息等
❌ Context 过度使用会影响性能（导致不必要的重新渲染）

3. Redux：适用于大型项目

Redux 是最流行的状态管理库，适用于复杂状态（如购物车、用户数据、权限控制等）。Redux 通过单一数据源（store）管理全局状态，并使用action + reducer 进行更新。

示例：使用 Redux 计数

安装 Redux：

npm install @reduxjs/toolkit react-redux

创建 store.js：

import { configureStore, createSlice } from "@reduxjs/toolkit";

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

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

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

export default store;

在 index.js 中提供 store：

import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

在 Counter.js 中使用 Redux：

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./store";

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

  return (
    <div>
      <h2>计数：{count}</h2>
      <button onClick={() => dispatch(increment())}>增加</button>
      <button onClick={() => dispatch(decrement())}>减少</button>
    </div>
  );
}

export default Counter;

✅ 适用于大型项目
✅ 状态集中管理，可预测
❌ 代码冗长，学习成本较高

4. Zustand：简洁轻量的 Redux 替代方案

Zustand 是一个更简单的状态管理库，使用 useStore 直接管理状态，无需 Provider。

示例：使用 Zustand 计数

安装 Zustand：

npm install zustand

创建 store.js：

import { create } from "zustand";

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

export default useStore;

在 Counter.js 中使用：

import useStore from "./store";

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h2>计数：{count}</h2>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
}

export default Counter;

✅ 代码简单，无需 Provider
✅ 比 Redux 轻量级（仅 1KB）
✅ 适用于中小型项目
❌ 不适用于特别复杂的状态管理

6. 明天预告

🚀 第二十一天：React 组件优化（useMemo、useCallback、React.memo）！