Open Skills Logo
Open Skills

react-ui-patterns

现代React UI模式：加载状态、错误处理与数据获取。适用于构建UI组件、处理异步数据或管理UI状态。

作者

@sickn33

分类

开发工具

安装

热度:3

下载并解压到你的 skills 目录

复制命令，发送给 OpenClaw 自动安装：

下载并安装这个技能 https://openskills.cc/api/download?slug=sickn33-skills-react-ui-patterns&locale=zh&source=copy

React UI Patterns - 现代 React UI 状态管理最佳实践

技能概述


React UI Patterns 是一套专为 React 开发者设计的 UI 状态管理指南，涵盖加载状态、错误处理、空状态设计等核心模式，帮助你构建用户体验出色的组件。

适用场景


  • 构建 UI 组件：当你需要开发包含数据加载、错误处理、空状态展示的 React 组件时，这些模式能确保你的 UI 在各种状态下都有恰当的表现。

  • 处理异步数据：在从 API 获取数据、提交表单或执行其他异步操作时，遵循这些模式可以避免加载闪烁、错误静默丢失等常见问题。

  • 管理 UI 状态：当需要协调加载中、成功、失败、空数据等多种 UI 状态时，这套指南提供了清晰的决策树和代码模板。

    • 核心功能


  • 加载状态模式：提供"黄金法则"指导——仅在没有数据时才显示加载指示器，避免在有缓存数据时出现不必要的加载闪烁。同时详细说明 spinner 和 skeleton 的使用场景。

  • 错误处理层级：定义从内联错误到全屏错误的四级处理体系，强调绝不能静默吞掉错误，用户必须知道何时操作失败。

  • 按钮与表单模式：确保异步操作期间按钮正确禁用并显示加载状态，防止用户重复提交，同时提供完整的表单提交最佳实践模板。

    • 常见问题

    什么时候应该显示 spinner，什么时候显示 skeleton？

    使用 spinner 当内容形状未知（如模态框操作、按钮提交）；使用 skeleton 当内容形状已知（如列表、卡片布局、页面初始加载）。核心原则是：只在真正没有数据时显示加载状态，避免在已有缓存数据时造成闪烁。

    如何避免 React 加载状态闪烁？

    遵循"仅在没有数据时显示加载"的黄金法则。检查条件应该是 if (loading && !data) 而不是单独的 if (loading)。这样在有缓存数据重新获取时，用户可以继续看到现有内容，而不是看到闪烁的 spinner。

    错误一定要显示给用户吗？

    是的，绝不能静默吞掉错误。根据错误的严重程度选择合适的展示方式：字段级内联错误用于表单验证、Toast 通知用于可恢复错误、Error Banner 用于页面级错误、全屏错误页用于无法恢复的故障。用户必须知道何时操作失败，以及如何重试。