Redux vs Zustand vs MobX 对比文档

概述

Redux、Zustand 和 MobX 是三个流行的 React 状态管理库，它们各有特点和适用场景。本文档从多个维度对比这三个库，帮助你选择最适合的状态管理方案。

概念对比

Redux

• 单向数据流：View → Action → Reducer → Store → View
• 不可变更新：必须返回新状态
• 纯函数：Reducer 必须是纯函数
• 单一数据源：整个应用只有一个 store

Zustand

• 简单直接：直接调用 store 的方法
• 选择器订阅：只订阅需要的状态部分
• 灵活更新：支持函数式和直接更新
• 无 Provider：不需要包裹 Provider

MobX

• 响应式编程：自动追踪状态变化
• 直接修改：可以直接修改状态
• 自动更新：自动更新依赖的组件
• 细粒度更新：只更新真正变化的部分

详细对比

1. 体积和依赖

特性	Redux	Zustand	MobX
体积	~10KB	~1KB	~15KB
依赖	无	无	无
React 绑定	react-redux (~5KB)	内置	mobx-react-lite (~2KB)
总体积	~15KB	~1KB	~17KB

结论：Zustand 体积最小，Redux 和 MobX 体积相近。

2. 代码示例对比

创建 Store

Redux：

// actions/counterActions.js
export const increment = () => ({ type: 'INCREMENT' })
export const decrement = () => ({ type: 'DECREMENT' })
​
// reducers/counterReducer.js
const initialState = { count: 0 }
function counterReducer(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
  }
}
​
// store/index.js
import { createStore } from 'redux'
const store = createStore(counterReducer)

Zustand：

import { create } from 'zustand'
​
const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

MobX：

import { makeAutoObservable } from 'mobx'
​
class CounterStore {
  count = 0
  
  constructor() {
    makeAutoObservable(this)
  }
  
  increment() {
    this.count++
  }
  
  decrement() {
    this.count--
  }
}
​
const counterStore = new CounterStore()

在组件中使用

Redux：

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './actions/counterActions'
​
function Counter() {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()
  
  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  )
}

Zustand：

import useStore from './store'
​
function Counter() {
  const count = useStore((state) => state.count)
  const increment = useStore((state) => state.increment)
  const decrement = useStore((state) => state.decrement)
  
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

MobX：

import { observer } from 'mobx-react-lite'
import counterStore from './stores/counterStore'
​
const Counter = observer(() => {
  return (
    <div>
      <button onClick={() => counterStore.decrement()}>-</button>
      <span>{counterStore.count}</span>
      <button onClick={() => counterStore.increment()}>+</button>
    </div>
  )
})

对比：

• Redux：（actions + reducer + store + component）
• Zustand：（store + component）
• MobX：（store + component）

3. 性能对比

特性	Redux	Zustand	MobX
更新粒度	组件级（通过 useSelector）	选择器级（细粒度）	属性级（最细粒度）
重新渲染	订阅的组件重新渲染	订阅的组件重新渲染	只有使用变化属性的组件重新渲染
性能优化	需要手动优化（useMemo、useCallback）	自动优化（选择器）	自动优化（细粒度追踪）
大列表性能	良好	良好	优秀

结论：MobX 性能最好（细粒度更新），Zustand 和 Redux 性能相近。

5. TypeScript 支持

特性	Redux	Zustand	MobX
原生支持	需要额外配置	原生支持	原生支持
类型推断	需要手动定义类型	自动推断	自动推断
类型安全	良好（需要配置）	优秀	优秀

结论：Zustand 和 MobX 的 TypeScript 支持更好。

6. 中间件和扩展

特性	Redux	Zustand	MobX
中间件系统	强大（redux-thunk、redux-saga 等）	内置中间件（persist、devtools）	无中间件概念
DevTools	优秀（Redux DevTools）	支持（可选）	支持（MobX DevTools）
持久化	需要 redux-persist	内置 persist 中间件	需要 mobx-persist
异步处理	redux-thunk、redux-saga	原生支持	原生支持（runInAction）

结论：Redux 的中间件生态系统最丰富，Zustand 内置常用功能，MobX 通过其他方式实现。

7. 适用场景

Redux 适合：

• ✅ 大型复杂应用
• ✅ 需要时间旅行调试
• ✅ 需要强大的中间件系统
• ✅ 团队熟悉函数式编程
• ✅ 需要严格的状态管理规范

Zustand 适合：

• ✅ 中小型应用
• ✅ 需要简单快速的状态管理
• ✅ 不想写太多样板代码
• ✅ 需要轻量级解决方案
• ✅ 快速原型开发

MobX 适合：

• ✅ 需要细粒度更新
• ✅ 喜欢响应式编程
• ✅ 面向对象思维
• ✅ 需要高性能的大列表
• ✅ 复杂的状态依赖关系

8. 生态

特性	Redux	Zustand	MobX
社区规模	最大	中等	较大
第三方库	丰富（redux-thunk、redux-saga 等）	较少	中等
学习资源	最多	中等	较多
维护活跃度	活跃	活跃	活跃

结论：Redux 生态系统最丰富，Zustand 和 MobX 生态系统相对较小但足够使用。

方案	核心定位	最佳适用场景
Redux	规范优先的全量状态管理	超大型应用、多人协作团队、需要严格状态追溯 / 审计的场景（如企业级系统、大型电商、政务系统）；需依赖丰富中间件（saga/thunk）处理复杂异步逻辑的场景。
Zustand	轻量优先的极简状态管理	中小型应用、追求低样板代码的场景；替代 Context + useReducer 解决性能问题的场景（如工具类应用、中小型业务系统）；需要「无 Provider 嵌套」+「细粒度订阅」的场景。
MobX	效率优先的响应式管理	复杂状态交互、快速开发的场景；交互密集型应用（如可视化编辑器、表单密集型应用、数据看板）；追求「零样板代码」+「极致细粒度更新」的场景。