react-ui-patterns

此技能为实现 React UI 状态提供了一个全面的框架，确保开发人员在数据驱动的组件设计中维持高标准。它专为需要管理复杂异步数据流、加载指示器和错误消息的前端工程师所设计，以避免常见的 UI 反模式。通过采用这些模式，团队可以防止诸如陈旧 UI 闪烁、错误被默默吞掉或未处理空状态等问题。此技能在开发使用 GraphQL 或 REST API 的仪表板、表单和数据密集型应用程序时特别有用。

• 实现加载指示器的黄金法则：仅在没有数据显示时才显示转圈动画或骨架屏，防止不必要的版面位移。

• 定义了清晰的错误处理层级，从字段级验证错误、Toast 通知，到页面级错误横幅与全屏回退机制。

• 标准化空状态的组件行为，确保每个列表或集合都有专属的空状态显示，以提供更好的用户体验。

• 强制执行严格的按钮交互准则，包含在进行表单提交或变更请求等异步操作时，禁用按钮并显示加载指示器。

• 提供根据内容形状与情境（例如初始页面加载与行内操作）选择骨架屏或转圈动画的决策树。

• 推广渐进式披露与优雅降级技术，即使在只有部分数据可用的情况下，也能保持界面的响应能力。

• 当您正在构建或重构与异步数据源或外部 API 交互的 UI 组件时，请使用此技能。

• 确保所有变更逻辑都包含 onError 处理程序，以避免吞没执行时的异常。

• 与自动化测试策略整合，以验证在不同数据条件下，空状态与错误边界都能正确渲染。

• 输入预期包含组件状态需求（加载中、错误、数据）与标准 UI 组件属性。

• 输出确保了一个可预测、具韧性的前端架构，遵循专业的设计系统标准，并在高延迟操作期间优化用户的视觉感知。