React 状态管理方案对比

状态管理概述

React 应用的状态管理有多种方案，选择合适的方案对项目至关重要。本文对比主流的状态管理方案。

方案对比

1. Context API

简介： React 内置的状态管理方案

特点：

✅ 无需安装额外库
✅ 简单易用
✅ 适合简单场景
❌ 性能问题（值变化导致所有消费者重新渲染）
❌ 不适合复杂状态管理

使用：

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

const CountContext = createContext();

function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

适用场景：

简单的全局状态
主题、语言等配置
小到中型项目

2. Redux

简介： 最流行的状态管理库，基于 Flux 架构

特点：

✅ 可预测的状态管理
✅ 强大的中间件生态
✅ 时间旅行调试
✅ 适合大型应用
❌ 样板代码多
❌ 学习曲线陡峭
❌ 配置复杂

使用：

// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

// Component.jsx
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

Redux Toolkit（推荐）：

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

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

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

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

适用场景：

大型应用
复杂的状态逻辑
需要时间旅行调试
团队熟悉 Redux

3. MobX

简介： 响应式状态管理库

特点：

✅ 响应式，自动更新
✅ 代码简洁
✅ 学习曲线平缓
✅ 性能好
❌ 不够函数式
❌ 调试困难
❌ 魔法较多

使用：

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class CounterStore {
  count = 0;
  
  constructor() {
    makeAutoObservable(this);
  }
  
  increment() {
    this.count++;
  }
  
  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();

const Counter = observer(() => {
  return (
    <div>
      <p>{counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.decrement()}>-</button>
    </div>
  );
});

适用场景：

需要响应式更新
面向对象编程风格
中小型项目

4. Zustand

简介： 轻量级状态管理库

特点：

✅ 极简 API
✅ 体积小（< 1KB）
✅ 无需 Provider
✅ TypeScript 友好
✅ 性能好
❌ 生态相对较小
❌ 不适合超大型应用

使用：

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, decrement } = useStore();
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

适用场景：

中小型项目
需要简单状态管理
追求轻量级
快速开发

5. Jotai

简介： 原子化状态管理库

特点：

✅ 原子化设计
✅ 细粒度更新
✅ 性能优秀
✅ TypeScript 友好
✅ 组合性强
❌ 学习曲线
❌ 生态较小

使用：

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

// 派生状态
const doubleCountAtom = atom((get) => get(countAtom) * 2);

适用场景：

需要细粒度更新
复杂的状态依赖
性能要求高
喜欢函数式编程

6. Recoil

简介： Facebook 官方状态管理库

特点：

✅ Facebook 官方
✅ 原子化设计
✅ 细粒度更新
✅ 异步支持好
❌ 仍处于实验阶段
❌ 文档不够完善
❌ 生态较小

使用：

import { RecoilRoot, atom, useRecoilState } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

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

适用场景：

Facebook 技术栈
需要异步状态管理
实验性项目

7. useReducer + Context

简介： React Hooks 组合方案

特点：

✅ 无需额外库
✅ 适合复杂状态逻辑
✅ 可预测
❌ 需要手动优化
❌ 样板代码多

使用：

import { createContext, useContext, useReducer } from 'react';

const CountContext = createContext();

function countReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function CountProvider({ children }) {
  const [state, dispatch] = useReducer(countReducer, { count: 0 });
  
  return (
    <CountContext.Provider value={{ state, dispatch }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { state, dispatch } = useContext(CountContext);
  
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

适用场景：

不想引入额外库
复杂的状态逻辑
中小型项目

对比表格

方案	体积	学习曲线	性能	适用场景	推荐度
Context API	0KB	⭐ 简单	⭐⭐	简单全局状态	⭐⭐⭐
Redux	~15KB	⭐⭐⭐⭐ 陡峭	⭐⭐⭐⭐	大型应用	⭐⭐⭐⭐
Redux Toolkit	~20KB	⭐⭐⭐ 中等	⭐⭐⭐⭐	大型应用	⭐⭐⭐⭐⭐
MobX	~15KB	⭐⭐ 平缓	⭐⭐⭐⭐⭐	响应式需求	⭐⭐⭐
Zustand	<1KB	⭐ 简单	⭐⭐⭐⭐	中小型项目	⭐⭐⭐⭐⭐
Jotai	~5KB	⭐⭐⭐ 中等	⭐⭐⭐⭐⭐	细粒度更新	⭐⭐⭐⭐
Recoil	~15KB	⭐⭐⭐ 中等	⭐⭐⭐⭐	实验性项目	⭐⭐⭐
useReducer	0KB	⭐⭐ 中等	⭐⭐⭐	复杂逻辑	⭐⭐⭐