📦
单一 Store
所有状态集中管理
⚡
极简 API
无需 Provider 包裹
🎯
细粒度订阅
只重渲染需要的组件
// Zustand Store
import { create } from 'zustand'
const useStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({
bears: state.bears + 1
}))
}))
// 在组件中使用
function BearCounter() {
const bears = useStore((state) => state.bears)
return {bears} bears around here
}
⚛️
原子化
状态拆分成独立 Atom
🔗
自动依赖
派生状态自动追踪
📝
TypeScript
原生类型支持
// Jotai Atom
import { atom } from 'jotai'
// 基础 Atom
const countAtom = atom(0)
// 派生 Atom
const doubleAtom = atom((get) => get(countAtom) * 2)
// 在组件中使用
function Counter() {
const [count, setCount] = useAtom(countAtom)
const [double] = useAtom(doubleAtom)
return (
<div>
<span>{count}</span>
<span>{double}</span>
</div>
)
}