⚙ 状态管理方案对比

使用同一计数器 Demo 对比 Redux · Zustand · Pinia · Jotai 四种方案的 API 简洁度与实现差异

R
Redux Toolkit 实现
⚙ createSlice + configureStore 📄 ~12 行核心代码
0
当前计数
4
核心概念数
~12
代码行数
中等
API 复杂度

</> 查看实现代码

展开 
// Redux Toolkit - createSlice + configureStore
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 },
    reset: state => { state.value = 0 },
    addAmount: (state, action) => { state.value += action.payload }
  }
})

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

const { increment, decrement, reset, addAmount } = counterSlice.actions

// 组件中使用
const state = store.getState()
store.dispatch(increment())
store.dispatch(addAmount(5))
Z
Zustand 实现
⚙ create + set / get 📄 ~8 行核心代码
0
当前计数
2
核心概念数
~8
代码行数
低
API 复杂度

</> 查看实现代码

展开 
// Zustand - 极简 API
import { create } from 'zustand'

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

// 组件中使用
function Counter() {
  const count = useStore(state => state.count)
  const increment = useStore(state => state.increment)
  return <button onClick={increment}>{count}</button>
}
P
Pinia 实现
⚙ defineStore + setup 语法 📄 ~10 行核心代码
0
当前计数
3
核心概念数
~10
代码行数
低-中
API 复杂度

</> 查看实现代码

展开 
// Pinia - Composition API 风格 (Vue 3)
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  function increment() { count.value++ }
  function decrement() { count.value-- }
  function reset() { count.value = 0 }
  function add(amount) { count.value += amount }

  return { count, doubleCount, increment, decrement, reset, add }
})

// 组件中使用
const store = useCounterStore()
store.increment()
// count: {{ store.count }}
// double: {{ store.doubleCount }}
J
Jotai 实现
⚙ atom + useAtom 📄 ~6 行核心代码
0
当前计数
2
核心概念数
~6
代码行数
低
API 复杂度

</> 查看实现代码

展开 
// Jotai - 原子状态模型
import { atom, useAtom } from 'jotai'

const countAtom = atom(0)

const doubleCountAtom = atom(get => get(countAtom) * 2)

// 组件中使用
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const [double] = useAtom(doubleCountAtom)

  return (
    <div>
      <p>{count} x2 = {double}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  )
}
⚙
方案对比总结
📊 基于同一计数器功能
对比维度 Redux Zustand Pinia Jotai
框架依赖 React React Vue 3 React
是否需要 Provider ✘ 必需 ✓ 不需要 ● 需要 ✓ 不需要
异步处理 thunk / saga async/await async/await async/await
渲染优化方式 选择器 选择器 响应式收集 Atom 依赖图
学习成本 高 低 中 低