用途:这是一个面向 React 状态架构设计的技能,帮助在开发中决定状态放在哪里、用哪种工具管理,并避免直接修改状态等常见错误。
主要能力:提供状态工具选型表(useState、useReducer、Context、外部 store、TanStack Query/SWR、useOptimistic、useActionState、useSyncExternalStore)、状态放置决策树、关键警告、状态模式示例、反模式清单,以及 React 18 与 19 的版本差异说明。
使用方式:按决策树判断——服务端数据用 TanStack Query 或 SWR;单值或简单对象用 useState;复杂状态转换用 useReducer;仅本组件需要则保持局部;父子与兄弟组件需要则提升到最近公共祖先;多个远距离组件需要且更新不频繁用 Context,更新频繁或需细粒度订阅用外部 store(如 Zustand、Jotai)。依赖前值时必须用更新函数形式 setState(prev => ...),昂贵初始值用惰性初始化 useState(() => computeExpensive())。
适用场景:设计状态架构、在多种状态管理方案间选型、排查状态相关问题时。
限制:资料未提供安装命令、收费信息或具体平台支持范围。React 19 的 useActionState、useOptimistic 及 Context 直接作为 Provider 的写法需对应版本支持;Server Components 无状态,状态逻辑须放在客户端组件中。