React开发模式与最佳实践Skill react-patterns

---

名称: react-patterns 描述: 现代React模式和原则。Hooks、组合、性能、TypeScript最佳实践。 允许工具: 读、写、编辑、全局搜索、grep

React模式

构建生产就绪React应用程序的原则。

---

1. 组件设计原则

组件类型

类型	用途	状态
服务器组件	数据获取，静态	无
客户端组件	交互性	useState, effects
表现型组件	UI显示	仅props
容器组件	逻辑/状态	重状态

设计规则

• 每个组件单一职责
• Props向下，事件向上
• 组合优于继承
• 偏好小型、专注的组件

---

2. Hook模式

何时提取Hooks

模式	提取时机
useLocalStorage	需要相同的存储逻辑时
useDebounce	多个防抖值时
useFetch	重复的获取模式时
useForm	复杂表单状态时

Hook规则

• Hooks仅在顶层使用
• 每次渲染顺序相同
• 自定义Hooks以"use"开头
• 卸载时清理effects

---

3. 状态管理选择

复杂度	解决方案
简单	useState, useReducer
共享本地	Context
服务器状态	React Query, SWR
复杂全局	Zustand, Redux Toolkit

状态放置

范围	位置
单个组件	useState
父子	提升状态
子树	Context
应用范围	全局存储

---

4. React 19模式

新Hooks

Hook	目的
useActionState	表单提交状态
useOptimistic	乐观UI更新
use	渲染中读取资源

编译器优势

• 自动记忆化
• 减少手动useMemo/useCallback
• 专注于纯组件

---

5. 组合模式

复合组件

• 父组件提供上下文
• 子组件消费上下文
• 灵活的基于插槽的组合
• 示例：标签页、手风琴、下拉菜单

Render Props vs Hooks

使用案例	偏好
可重用逻辑	自定义Hook
渲染灵活性	Render Props
横切关注点	高阶组件

---

6. 性能原则

何时优化

信号	操作
渲染慢	先分析
大列表	虚拟化
昂贵计算	useMemo
稳定回调	useCallback

优化顺序

1. 检查是否真的慢
2. 使用DevTools分析
3. 识别瓶颈
4. 应用针对性修复

---

7. 错误处理

错误边界使用

范围	放置位置
应用范围	根级别
功能	路由/功能级别
组件	围绕风险组件

错误恢复

• 显示备用UI
• 记录错误
• 提供重试选项
• 保存用户数据

---

8. TypeScript模式

Props类型

模式	用途
Interface	组件props
Type	联合类型，复杂
Generic	可重用组件

常见类型

需求	类型
子元素	ReactNode
事件处理程序	MouseEventHandler
引用	RefObject<Element>

---

9. 测试原则

级别	焦点
单元	纯函数，Hooks
集成	组件行为
E2E	用户流程

测试优先级

• 用户可见行为
• 边缘案例
• 错误状态
• 可访问性

---

10. 反模式

❌ 不要	✅ 做
深层Prop传递	使用上下文
巨型组件	拆分更小
对所有事情使用useEffect	服务器组件
过早优化	先分析
索引作为键	稳定唯一ID

---

记住： React是关于组合的。构建小型，精心组合。