SuperAPI AI 工具集

local-vs-global-state

编程与开发

查看项目

更新于 10-15 22:19

技能介绍

用途:审计 React 组件树中的状态归属,把每一处状态分类为本地、共享(提升或 Context)、全局、服务端、URL 或表单状态,并输出可落地的重构方案与理由。

主要能力:扫描 useState/useReducer、Context、全局 store(Redux、Zustand、Jotai 等)、数据请求(useEffect+fetch、React Query、SWR、tRPC)、路由/URL 状态与表单状态;用决策树逐项分类;标记反模式,如属性透传(3 层以上)、冗余全局状态、用 useState 存服务端数据、陈旧闭包、单一巨型 Context、缺少 memo、本应入 URL 的状态;输出状态审计表、问题清单、标注状态归属的组件树、前后对比代码片段和总结建议。

使用方式:用户提供代码或组件树后按上述四步执行;若未提供代码,则请用户分享组件树或描述状态所在位置。信息不完整时可作合理假设并说明,提出 1 至 2 个关键澄清问题,同时仍给出方向性建议。对 Vue、Svelte、Angular 沿用相同分类逻辑并适配对应工具(如 Vue 用 Pinia)。

适用场景:React 组件状态混乱、属性透传严重、全局 store 滥用、服务端数据用 useState 管理、筛选/分页等状态刷新丢失时。

限制:仅依据用户提供的代码或描述工作,不主动读取代码库;分类建议属于方向性指导,需结合实际项目验证;资料未提供具体性能数据或自动化执行方式。