关于 react-patterns
面向 React 开发者的模式指南，涵盖组件设计、Hooks、状态管理、性能、错误处理、TypeScript 和测试。内容也涉及 React 19 的 Hooks，并提供按应用复杂度选择方案的参考。
主要功能
- 01组件设计与组合模式
- 02自定义 Hook 与状态管理
- 03React 19 Hook 用法
- 04性能分析与针对性优化
- 05错误处理与恢复
- 06TypeScript 和测试原则
适用场景
- 01规划组件职责与状态范围
- 02选择状态管理方案
- 03定位 React 渲染性能问题
- 04设计错误处理与测试策略
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-patterns确认已加载。
详细介绍
React 模式
构建生产级 React 应用的原则。
1. 组件设计原则
组件类型
| 类型 | 用途 | 状态 |
|---|---|---|
| 服务端 | 数据获取、静态 | 无 |
| 客户端 | 交互性 | useState、副作用 |
| 展示型 | UI 展示 | 仅 props |
| 容器型 | 逻辑/状态 | 大量状态 |
设计规则
- 每个组件只负责一件事
- props 向下传递，事件向上传递
- 优先使用组合而非继承
- 优先采用小而专注的组件
2. Hook 模式
何时提取 Hook
| 模式 | 提取时机 |
|---|---|
| useLocalStorage | 需要相同的存储逻辑 |
| useDebounce | 多个防抖值 |
| useFetch | 重复的获取模式 |
| useForm | 复杂的表单状态 |
Hook 规则
- Hook 只能位于顶层
- 每次渲染顺序相同
- 自定义 Hook 以 "use" 开头
- 卸载时清理副作用
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
渲染属性 vs Hook
| 使用场景 | 优先选择 |
|---|---|
| 可复用逻辑 | 自定义 Hook |
| 渲染灵活性 | 渲染属性 |
| 横切关注点 | 高阶组件 |
6. 性能原则
何时优化
| 信号 | 操作 |
|---|---|
| 渲染缓慢 | 先进行性能分析 |
| 大型列表 | 虚拟化 |
| 昂贵计算 | useMemo |
| 稳定回调 | useCallback |
优化顺序
- 检查是否确实缓慢
- 使用 DevTools 进行性能分析
- 找出瓶颈
- 应用针对性修复
7. 错误处理
错误边界使用
| 范围 | 放置位置 |
|---|---|
| 应用级 | 根层级 |
| 功能 | 路由/功能层级 |
| 组件 | 高风险组件周围 |
错误恢复
- 显示回退 UI
- 记录错误
- 提供重试选项
- 保留用户数据
8. TypeScript 模式
Props 类型标注
| 模式 | 用途 |
|---|---|
| Interface | 组件 props |
| Type | 联合类型、复杂类型 |
| 泛型 | 可复用组件 |
常见类型
| 需求 | 类型 |
|---|---|
| 子元素 | ReactNode |
| 事件处理程序 | MouseEventHandler |
| Ref | RefObject |
9. 测试原则
| 层级 | 重点 |
|---|---|
| 单元 | 纯函数、Hook |
| 集成 | 组件行为 |
| E2E | 用户流程 |
测试优先级
- 用户可见行为
- 边缘情况
- 错误状态
- 可访问性
10. 反模式
| ❌ 不要 | ✅ 要 |
|---|---|
| 深层 prop 逐层传递 | 使用 context |
| 巨型组件 | 拆分成更小的组件 |
| 一切都用 useEffect | 服务端组件 |
| 过早优化 | 先进行性能分析 |
| 使用索引作为 key | 稳定的唯一 ID |
记住： React 的核心在于组合。构建小的部分，精心地组合起来。
评论
支持 Markdown