S
架构师
2个月前
2025 年前端状态管理方案对比
状态管理ZustandRedux
2025 年前端状态管理方案对比
选择最适合你项目的状态管理方案。
1. Zustand
typescript
import { create } from 'zustand'
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 }))
}))
2. Jotai
typescript
import { atom, useAtom } from 'jotai'
const countAtom = atom(0)
const doubleAtom = atom((get) => get(countAtom) * 2)
function Counter() {
const [count, setCount] = useAtom(countAtom)
return
}
3. Redux Toolkit
typescript
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1 }
}
})
4. 对比表
| 特性 | Zustand | Jotai | Redux |
| ------ | --------- | ------- | ------- |
| 包大小 | 1KB | 2KB | 10KB |
| 学习曲线 | 低 | 低 | 中 |
| DevTools | ✅ | ✅ | ✅ |
| SSR | ✅ | ✅ | ✅ |
5. 选择建议
5.9k 阅读