题库/React/题目详解
宝典补充约 3 分钟阅读

Redux、MobX、Zustand、Vuex、Pinia 应该怎样选？

先理解原理和示例，再练习完整口述与追问。

回答要点

先区分状态类型：服务端数据交给 React Query、SWR 或 RTK Query；局部 UI 状态放组件内；真正跨页面共享的客户端状态才用全局 store。Redux（RTK）流程显式、生态和调试最完善；MobX 基于可观察对象自动追踪，代码量少；Zustand 轻量、基于 Hook；Vue 项目新代码用 Pinia，Vuex 处于维护状态。

原理拆解

Redux 强调不可变数据和集中式 reducer，变化可追踪、可回放，适合大型团队与严格规范。MobX 用 Proxy 或 getter 追踪组件读取的属性，修改后精确重渲染，写法接近 Vue 的响应式，但数据流隐式。Zustand 的 store 是一个闭包，组件通过 selector 订阅片段状态，不需要 Provider，适合中小型应用。Jotai、Recoil 采用原子化状态。

Vuex 有 state、getters、mutations、actions、modules，mutation 必须同步。Pinia 去掉了 mutations，支持组合式写法和完整的 TypeScript 推导，每个 store 独立定义、按需引入，也支持 DevTools 和 SSR，是 Vue 官方推荐的状态库。

示例与推演

js
import { create } from 'zustand'
const useCart = create(set => ({
  items: [],
  add: item => set(state => ({ items: [...state.items, item] }))
}))
const count = useCart(state => state.items.length) // 只订阅数量，items 内容变化但长度不变时不重渲染

易错点

把接口数据手动放进全局 store 再自己处理缓存和失效，通常不如专门的服务端状态库；Zustand 的 selector 每次返回新对象会导致频繁渲染，需要 useShallow。

参考回答可直接练习口述

我会先按状态类型拆分：接口数据用 React Query 这类服务端状态库，局部 UI 状态放组件里，只有跨页面的客户端状态才进全局 store。React 里大型团队、需要严格可追踪选 Redux Toolkit，偏响应式写法选 MobX，中小项目选轻量的 Zustand；Vue 新项目用 Pinia，它去掉了 mutations，TypeScript 支持好，Vuex 只在老项目维护。