Zustand 和 Jotai 等轻量级状态库与 Redux 有何不同？

Question

Accepted Answer

**Zustand** 和 **Jotai** 是最小化状态库，用远少于 Redux 的样板代码实现全局状态，并内置**选择性订阅**以避免不必要的重新渲染。它们采用不同的心智模型：Zustand 是单一存储；Jotai 是原子式的。 ## Zustand — 简洁的、基于 hook 的存储 ```jsx import { create } from "zustand"; // define a store: state + the actions that update it, all in one place const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), // no actions/reducers/dispatch reset: () => set({ count: 0 }), })); function Counter() { const count = useStore((s) => s.count); // SELECT — re-renders only when count changes const increment = useStore((s) => s.increment); return ; } ``` 没有 provider、没有 actions、没有 reducers、没有 dispatch — 你直接调用 setter 函数。选择器 (`s => s.count`) 意味着组件**仅在**该切片变化时才重新渲染。 ## Jotai — 原子状态 ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a tiny piece of state const doubleAtom = atom((get) => get(countAtom) * 2); // derived atom function Counter() { const [count, setCount] = useAtom(countAtom); // works like useState, but GLOBAL return ; } ``` Jotai 由你组合的小型**原子**构建状态；组件订阅各个原子，仅当这些特定原子改变时才重新渲染。 ## 与 Redux 的对比 ```text Redux (classic) Zustand Jotai Boilerplate high (actions/reducers) very low very low Provider required none minimal Mental model single store + dispatch single store, hooks atomic (useState-like) Re-renders needs selectors selector built-in per-atom (granular) Devtools excellent good good Bundle size larger tiny (~1KB) tiny ``` ## 选择标准 ```text Zustand → simple global state, minimal ceremony (most apps' global needs) Jotai → bottom-up/granular state, lots of independent pieces, derived values Redux(RTK) → very large apps, strict structure, rich devtools/middleware ecosystem ``` ## 为什么这很重要 Zustand 和 Jotai 代表了从 Redux 的样板代码向**最小化、人体工程学**全局状态演进的现代趋势，内置选择性订阅（解决了 Context 的重新渲染问题）。了解它们的存在 — 以及 Zustand 提供微小的单存储模型而 Jotai 提供可组合原子 — 让你能够选择适合大多数应用全局状态需求的轻量级工具，为真正大型、复杂的应用保留更重的 Redux Toolkit。 Contextd 相比，关键的共同优势是细粒度订阅，可防止过度渲染。