状态管理不是越多越好，而是要分层。一个实用的划分是三类：纯本地状态（表单输入、展开收起）放 useState 或 ref；跨组件共享的客户端状态（登录信息、主题、购物车）放全局 store；而服务端来的数据本质是缓存，交给 React Query、TanStack Query 或 SWR 这类工具更合适。
新人最常犯的错是把所有状态一股脑塞 Vuex/Redux——一个按钮的 loading 也走全局，写起来啰嗦还引入重渲染风险。衡量标准可以朴素一点：这个状态被几个不相关组件读？会否被另一个页面改？都不成立就留在组件里，等需求真正演化再上移。
// 同一需求三种状态归属的对比：购物车计数 // 1. 本地状态：只有一个组件用 var _a = React.useState(0); var n = _a[0]; var setN = _a[1]; // 2. 全局 store：多个不相关组件共享（Zustand 形态） var useCart = { count: 0, add: function () { useCart.count++; } }; function CartBadge() { return '购物车 ' + useCart.count; } // 3. 服务端缓存：数据来自接口，交给请求库管（react-query 形态） var q = useQuery('cart', function () { return fetch('/api/cart').then(function (r) { return r.json(); }); }); // q.data.count + 乐观更新：先改缓存，失败再回滚 // 三类状态边界清晰，就不必把一切塞进同一个 Redux 仓库