关于 react-patterns
为编写现代 React 应用提供模式指导，涵盖组件组合、Hooks、状态管理、性能与无障碍实践，适用于需要实现或审查 React 界面的开发者。
主要功能
- 01组件组合模式
- 02自定义 Hook 用法
- 03状态管理选择
- 04性能优化与代码拆分
- 05错误处理与无障碍实践
适用场景
- 01设计可复用的复合组件
- 02为表单和数据请求编写 Hook
- 03选择适合界面的状态方案
- 04优化大型组件和交互流程
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-patterns确认已加载。
附带文件references/examples.md
详细介绍
React 模式
关于使用 hooks、组件组合、状态管理和并发功能实现现代 React 模式的专家指南。
核心理念
| 优先事项 | 描述 |
|---|---|
| 组件组合 | 使用简单、可复用的部分构建复杂 UI |
| 关注点分离 | 将业务逻辑放在 hooks 中，将展示逻辑放在组件中 |
| 明确优于隐式 | 保持数据流和状态管理清晰 |
| 性能 | 尽量减少重复渲染，优化高开销计算 |
| 无障碍性 | 构建包容且支持键盘导航的界面 |
模式类别
组件组合模式
| 模式 | 使用场景 | 示例 |
|---|---|---|
| 复合组件 | 通过共享上下文实现灵活的组件 API | Accordion、Tabs、Menu |
| 渲染属性 | 在组件之间共享逻辑 | MouseTracker、滚动位置 |
| 高阶组件 | 包装组件以添加功能 | withAuth、withLoading |
完整代码示例请参见 references/examples.md。
自定义 Hooks 模式
| Hook | 用途 |
|---|---|
useApi | 获取数据并管理加载/错误状态 |
useForm | 管理表单状态并进行验证 |
useDebounce | 对快速变化的值进行防抖处理 |
usePrevious | 访问状态/属性的先前值 |
useLocalStorage | 将状态持久化到 localStorage |
实现示例请参见 references/examples.md。
状态管理模式
| 类型 | 适用场景 | 示例 |
|---|---|---|
| useState | 简单的 UI 状态 | 开关、表单输入、分页 |
| useReducer | 复杂的状态逻辑 | 多步骤表单、购物车 |
| Context | 主题、身份验证、全应用设置 | 用户会话、功能标志 |
| URL 状态 | 可分享/可加入书签的状态 | 筛选器、搜索参数、标签页 |
| 服务端状态 | API 数据（React Query/SWR） | 用户资料、产品目录 |
| 全局存储 | 跨功能协调 | 复杂应用使用 Zustand/Redux |
Context + useReducer 模式：最适合需要在多个组件间共享、且包含多个操作的复杂状态。请参见 references/examples.md。
性能优化
何时使用记忆化
| 工具 | 使用时机 |
|---|---|
useMemo | 高开销计算（排序、筛选大型数组） |
useCallback | 传递给记忆化子组件或用于依赖项的函数 |
memo | 使用相同属性频繁重新渲染的纯组件 |
代码拆分策略
| 级别 | 实现方式 |
|---|---|
| 路由级 | lazy(() => import('./pages/Dashboard')) |
| 组件级 | 图表、编辑器等大型组件 |
| 条件级 | 由功能标志控制的功能 |
始终使用适当的回退内容，将 lazy 组件包装在 <Suspense> 中。
错误处理
| 策略 | 范围 |
|---|---|
| 错误边界 | 组件树错误（类组件） |
| try/catch | 异步操作、事件处理程序 |
| React Query onError | 支持自动重试的 API 错误 |
错误边界的放置位置：应用级错误边界用于致命错误，功能级错误边界用于优雅降级。
无障碍模式
| 要求 | 实现方式 |
|---|---|
| 焦点管理 | 关闭模态框时将焦点返回到触发元素 |
| 键盘导航 | 在交互元素中支持 Tab、Enter、Escape |
| ARIA 标签 | 用于图标按钮及没有可见标签的表单输入 |
| 语义化 HTML | 适当使用 <nav>、<main>、<button> |
无障碍模态框实现请参见 references/examples.md。
最佳实践检查清单
- 当逻辑被重复使用或较复杂（超过 20 行）时，提取自定义钩子
- 使用复合组件，打造灵活的组件 API
- 对耗时的计算以及传递给已记忆化子组件的回调进行记忆化
- 对路由和大型组件进行代码拆分
- 在适当的层级使用错误边界处理错误
- 在模态框和动态内容中管理焦点
- 使用语义化 HTML 和 ARIA 标签来确保无障碍访问
- 将钩子与组件分开，独立测试
- 保持组件精简（少于 200 行）
- 将状态放在使用它的位置附近
评论
支持 Markdown