构建具有适当加载状态、错误处理和用户反馈的 React 组件具有挑战性，通常会导致混乱的用户体验。此技能提供了经过实战检验的 UI 模式，用于处理异步操作、显示适当的反馈并创建流畅的用户体验。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“react-ui-patterns”。 如何在重新获取数据时避免闪烁地显示加载状态？
预期结果:
使用此模式：仅在 loading 为 true 且没有数据时才显示加载指示器。这可以在有缓存数据可用时防止闪烁。示例：if (loading && !data) return <Skeleton />;
正在使用“react-ui-patterns”。 在 React 中处理错误的正确方法是什么？
预期结果:
始终向用户展示错误，并提供清晰的消息。使用层级结构：表单使用内联错误，可恢复的错误使用 toast，页面级问题使用横幅，不可恢复的故障使用完整错误页面。
正在使用“react-ui-patterns”。 在表单提交期间我应该如何处理按钮状态？
预期结果:
在提交期间禁用按钮并显示加载指示器。这可以防止重复提交并给用户反馈，让他们知道操作正在进行中。
安全审计
安全Static analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
质量评分
你能构建什么
构建数据驱动的 React 组件
当创建从 API 获取数据的组件时，遵循既定模式应用适当的加载、错误和空状态。
处理表单提交
在实现具有异步提交的表单时，确保在提交期间禁用按钮并显示适当的加载反馈。
改善用户体验
在重构现有 React 代码以消除令人困惑的加载闪烁和隐藏错误时。
试试这些提示
展示如何为获取数据的 React 组件实现加载状态。我希望在已有缓存数据时避免显示加载图标。
为 React 创建一个错误状态组件，显示错误消息并包含重试按钮。我应该如何将其与 Apollo 或 React Query 集成？
编写 React 中的表单提交模式，在 mutation 期间禁用提交按钮，显示加载图标，并显示成功或错误的 toast 提示。
构建一个完整的 React 组件，处理所有 UI 状态：加载（带骨架屏）、错误（带重试）、空状态（带操作号召）和成功（带数据显示）。
最佳实践
- 永远不要显示过时的 UI - 仅当没有数据可显示时才显示加载图标
- 始终向用户展示错误 - 永远不要在没有任何反馈的情况下静默地吞掉错误
- 在异步操作期间禁用按钮以防止重复提交
避免
- 无论是否存在缓存数据，只要 loading 为 true 就显示加载图标
- 捕获错误后仅记录到控制台而不向用户显示任何反馈
- 在表单提交期间允许用户多次点击提交按钮