关于 react-patterns
react-patterns 是面向 React 应用开发者的技能，汇总组件、Hook、状态、性能、错误处理、TypeScript 和测试方面的实践模式。
主要功能
- 01选择组件类型并划分职责
- 02应用 Hook 与状态管理模式
- 03使用 React 19 新 Hook
- 04通过复合组件组合界面
- 05先分析再优化性能
- 06处理错误、类型和测试
适用场景
- 01规划 React 功能的组件结构
- 02选择状态范围与存储方式
- 03审查性能优化或错误恢复方案
- 04规划组件及用户流程测试
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-patterns确认已加载。
附带文件plugin.json
详细介绍
React 模式
1. 组件设计原则
组件类型
| 类型 | 用途 | 状态 |
|---|---|---|
| Server | 获取数据、静态内容 | 无 |
| Client | 交互 | useState、effects |
| 展示型 | UI 展示 | 仅使用 Props |
| 容器型 | 逻辑/状态 | 大量状态 |
设计规则
- 每个组件只负责一项职责
- Props 向下传递，事件向上传递
- 优先使用组合，而非继承
- 优先使用小巧、专注的组件
2. Hook 模式
何时抽取 Hook
| 模式 | 抽取时机 |
|---|---|
| useLocalStorage | 需要复用相同的存储逻辑 |
| useDebounce | 需要处理多个防抖值 |
| useFetch | 重复出现获取数据的模式 |
| useForm | 表单状态复杂 |
Hook 规则
- 只能在顶层调用 Hook
- 每次渲染的调用顺序必须一致
- 自定义 Hook 以 "use" 开头
- 卸载时清理 effects
3. 状态管理方案选择
| 复杂度 | 方案 |
|---|---|
| 简单 | useState、useReducer |
| 本地共享 | Context |
| 服务端状态 | React Query、SWR |
| 复杂的全局状态 | Zustand、Redux Toolkit |
状态放置位置
| 范围 | 位置 |
|---|---|
| 单个组件 | useState |
| 父子组件 | 将状态提升到父级 |
| 子树 | Context |
| 整个应用 | 全局 store |
4. React 19 模式
新 Hook
| Hook | 用途 |
|---|---|
| useActionState | 表单提交状态 |
| useOptimistic | 乐观 UI 更新 |
| use | 在渲染过程中读取资源 |
编译器优势
- 自动记忆化
- 减少手动使用 useMemo/useCallback
- 专注于纯组件
5. 组合模式
复合组件
- 父组件提供 context
- 子组件使用 context
- 灵活的基于插槽的组合
- 示例：Tabs、Accordion、Dropdown
Render Props 与 Hooks
| 使用场景 | 优先选择 |
|---|---|
| 可复用逻辑 | 自定义 Hook |
| 渲染灵活性 | Render props |
| 横切关注点 | 高阶组件 |
6. 性能原则
何时优化
| 信号 | 操作 |
|---|---|
| 渲染缓慢 | 先进行性能分析 |
| 列表过长 | 使用虚拟化 |
| 计算开销大 | useMemo |
| 回调稳定 | useCallback |
优化顺序
- 确认是否真的缓慢
- 使用 DevTools 进行性能分析
- 找出瓶颈
- 针对性地修复
7. 错误处理
错误边界的使用
| 范围 | 放置位置 |
|---|---|
| 整个应用 | 根级别 |
| 功能 | 路由/功能级别 |
| 组件 | 包裹可能出错的组件 |
错误恢复
- 显示备用 UI
- 记录错误
- 提供重试选项
- 保留用户数据
8. TypeScript 模式
Props 类型定义
| 模式 | 用途 |
|---|---|
| Interface | 组件 Props |
| Type | 联合类型、复杂类型 |
| Generic | 可复用组件 |
常见类型
| 需求 | 类型 |
|---|---|
| 子节点 | ReactNode |
| 事件处理器 | MouseEventHandler |
| Ref | RefObject |
9. 测试原则
| 级别 | 重点 |
|---|---|
| 单元测试 | 纯函数、Hooks |
| 集成测试 | 组件行为 |
| E2E | 用户流程 |
测试优先级
- 用户可见的行为
- 边缘情况
- 错误状态
- 无障碍性
10. 反模式
| ❌ 不要 | ✅ 应该 |
|---|---|
| 深层传递 Props | 使用 context |
| 巨型组件 | 拆分为更小的组件 |
| 什么都用 useEffect | 使用服务端组件 |
| 过早优化 | 先进行性能分析 |
| 使用索引作为 key | 使用稳定的唯一 ID |
请记住： React 的核心是组合。构建小组件，并审慎地组合。
适用场景
当任务符合概述中描述的工作流或操作时，可使用此技能。
限制
- 仅当任务明确符合上述范围时，才使用此技能。
- 请勿将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。
评论
支持 Markdown