关于
现代 React 模式与原则。涵盖 Hooks、组合、性能优化和 TypeScript 最佳实践
name: react-patterns description: "现代React模式与原则。Hooks、组合、性能、TypeScript最佳实践。" risk: safe source: community date_added: "2026-02-27"
React模式
构建生产级React应用的原则。
1. 组件设计原则
组件类型
| 类型 | 用途 | 状态 | |------|-----|-------| | Server | 数据获取、静态内容 | 无 | | Client | 交互性 | useState、effects | | Presentational | UI展示 | 仅Props | | Container | 逻辑/状态 | 重状态 |
设计规则
- 每个组件单一职责
- 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模式
新Hooks
| Hook | 用途 | |------|---------| | useActionState | 表单提交状态 | | useOptimistic | 乐观UI更新 | | use | 在渲染中读取资源 |
编译器优势
- 自动记忆化
- 减少手动useMemo/useCallback
- 专注于纯组件
5. 组合模式
复合组件
- 父组件提供context
- 子组件消费context
- 灵活的插槽式组合
- 示例：Tabs、Accordion、Dropdown
Render Props vs Hooks
| 用例 | 优先选择 | |----------|--------| | 可复用逻辑 | 自定义Hook | | 渲染灵活性 | Render Props | | 横切关注点 | 高阶组件 |
6. 性能原则
何时优化
| 信号 | 操作 | |--------|--------| | 渲染缓慢 | 先做性能分析 | | 大列表 | 虚拟化 | | 昂贵计算 | useMemo | | 稳定回调 | useCallback |
优化顺序
- 确认是否真的慢
- 使用DevTools分析
- 定位瓶颈
- 应用针对性修复
7. 错误处理
Error Boundary使用
| 范围 | 放置位置 | |-------|-----------| | 全应用 | 根级别 | | 功能模块 | 路由/功能级别 | | 组件 | 包裹风险组件 |
错误恢复
- 显示降级UI
- 记录错误日志
- 提供重试选项
- 保留用户数据
8. TypeScript模式
Props类型定义
| 模式 | 用途 | |---------|-----| | Interface | 组件Props | | Type | 联合类型、复杂类型 | | Generic | 可复用组件 |
常用类型
| 需求 | 类型 | |------|------| | 子元素 | ReactNode | | 事件处理器 | MouseEventHandler | | Ref | RefObject<Element> |
9. 测试原则
| 层级 | 关注点 | |-------|-------| | 单元测试 | 纯函数、Hooks | | 集成测试 | 组件行为 | | E2E测试 | 用户流程 |
测试优先级
- 用户可见行为
- 边界情况
- 错误状态
- 无障碍性
10. 反模式
| 不要 | 应该 | |----------|-------| | 深层Props透传 | 使用Context | | 巨型组件 | 拆分为更小组件 | | 所有事情用useEffect | Server Components | | 过早优化 | 先做性能分析 | | 用index作为key | 使用稳定唯一ID |
11. 文件结构
<img width="1150" height="1438" alt="image" src="https://github.com/user-attachments/assets/10369698-472c-4695-a494-2c0672103aa1" />使用此图片作为项目文件结构的参考
记住： React的核心是组合。构建小组件，精心组合。
何时使用
当任务明确匹配上述概述中描述的工作流或操作时，适用此技能。
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准，请停下来寻求澄清。