React UI Patterns 是一套用于现代 React 应用 UI 开发的经验性模式集合，主要解决加载状态、错误处理和数据获取三类容易被忽视的界面状态问题。
用途 该模式集适用于构建 UI 组件、处理异步数据、管理 UI 状态的场景，帮助开发者在实现列表、表单、按钮等常见界面元素时统一处理各类边界情况。
核心原则 文档提出五条核心原则：永远不展示过期 UI（仅在真正加载时显示加载指示器）；错误必须暴露给用户，不能静默吞掉；使用乐观更新让 UI 感觉即时；渐进式披露，内容就绪多少展示多少；优雅降级，部分数据优于无数据。
加载状态模式 关键规则是：只有在没有数据可展示时才显示加载指示器。文档给出正确与错误写法对比，错误做法是在有缓存数据时仍因重新获取数据而闪烁加载指示器。加载决策树依次判断：是否有错误（有则显示错误状态与重试选项）；是否正在加载且无数据（是则显示加载指示器）；是否有数据（有数据则展示，空数据则展示空状态，无数据则回退到加载状态）。骨架屏与加载指示器的选择标准为：已知内容形状、列表或卡片布局、首次页面加载、内容占位时使用骨架屏；未知内容形状、模态操作、按钮提交、内联操作时使用加载指示器。
错误处理模式 错误处理分为四个层级：字段级内联错误用于表单校验；Toast 通知用于可恢复、用户可重试的错误；错误横幅用于页面级错误且数据仍部分可用的情况；全屏错误页用于不可恢复、需要用户操作的场景。文档强调绝不静默吞掉错误，所有 mutation 都应配置 onError 处理器并向用户给出提示。同时提供了 ErrorState 组件的 TypeScript 接口示例，包含错误对象、可选重试回调和标题属性。
按钮与表单状态 按钮在异步操作期间必须禁用，避免用户重复点击，并可通过 isLoading 属性展示加载状态。表单提交模式要求校验失败时给出提示并中止提交，提交过程中禁用按钮并显示加载状态，提交完成或失败分别走 onCompleted 与 onError 回调。
空状态 每个列表或集合都必须提供空状态，并区分语境：搜索无结果时提示尝试不同搜索词；列表尚无数据时提示创建第一项并提供操作按钮。
反模式与检查清单 文档列举了加载状态、错误处理、按钮状态三类反模式，例如有数据时显示加载指示器导致闪烁、捕获异常后只打印日志、提交期间按钮未禁用等。完成任何 UI 组件前的检查清单包括：错误状态已处理并展示给用户；仅在无数据时显示加载状态；集合提供空状态；异步操作期间按钮禁用；按钮在适当时显示加载指示；mutation 具备 onError 处理器；所有用户操作都有反馈。
技能集成 该模式可与 GraphQL 模式（带错误处理的 mutation）、测试模式（覆盖加载、错误、空、成功全部 UI 状态）、Formik 模式（表单提交模式）配合使用。