state-management

此技能为管理前端应用程序状态提供结构化框架，针对何时及如何实现各种模式提供架构指导。专为在 React 或 Vue 应用程序中工作并需要维护干净、高性能与可扩展代码库的前端开发人员与架构师所设计。通过将状态分类为本地、共享、服务器、全局及 URL 状态，帮助团队选择合适的工具，减少复杂性并避免诸如不必要的重新渲染或数据过时等常见错误。

• 将状态分为五个不同层次：本地 UI、共享 UI、服务器、全局应用程序及 URL 状态。

• 提供 TanStack Query (原 React Query) 的详细实现模式，包括基本查询、变异与乐观更新。

• 提供适用于 React 的 Zustand 与 Vue 的 Pinia 全局状态管理模板，并完整包含性能优化选择器 (Selectors) 与计算属性。

• 包含基于 URL 的状态同步最佳实践，确保应用程序状态可分享且可加入书签。

• 包含针对简单组件层级 useState、基于 Context 的 Provider 与外部库之间如何选择的决策逻辑。

• 在架构新功能时，使用此技能来决定数据应属于全局存储、服务器缓存还是组件状态。

• 输入：关于状态数据的上下文（例如：API 响应、主题或表单输入）与所使用的框架（React/Vue）。

• 输出：推荐的实现方法、代码模式与架构合理性说明。

• 实践限制：专注于现代工业标准库；开发人员应根据状态管理需求的复杂度来评估库的包大小。管理全局存储时，请务必使用性能优化的选择器（例如 Zustand 中的浅比较）以防止不必要的组件重新渲染。