react-patterns by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill react-patterns构建生产就绪的 React 应用程序的原则。
| 类型 | 用途 | 状态 |
|---|---|---|
| Server | 数据获取，静态 | 无 |
| Client | 交互性 | useState, effects |
| Presentational | UI 展示 | 仅 Props |
| Container | 逻辑/状态 | 重度状态 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 模式 | 提取时机 |
|---|---|
| useLocalStorage | 需要相同的存储逻辑 |
| useDebounce | 多个防抖值 |
| useFetch | 重复的获取模式 |
| useForm | 复杂的表单状态 |
| 复杂度 | 解决方案 |
|---|---|
| 简单 | useState, useReducer |
| 共享局部状态 | Context |
| 服务器状态 | React Query, SWR |
| 复杂全局状态 | Zustand, Redux Toolkit |
| 作用域 | 位置 |
|---|---|
| 单个组件 | useState |
| 父子组件 | 状态提升 |
| 子树 | Context |
| 应用范围 | 全局存储 |
| Hook | 用途 |
|---|---|
| useActionState | 表单提交状态 |
| useOptimistic | 乐观 UI 更新 |
| use | 在渲染中读取资源 |
| 使用场景 | 推荐 |
|---|---|
| 可复用逻辑 | 自定义 Hook |
| 渲染灵活性 | Render props |
| 横切关注点 | 高阶组件 |
| 信号 | 行动 |
|---|---|
| 渲染缓慢 | 先进行性能分析 |
| 大型列表 | 虚拟化 |
| 昂贵计算 | useMemo |
| 稳定回调 | useCallback |
| 作用域 | 放置位置 |
|---|---|
| 应用范围 | 根级别 |
| 功能 | 路由/功能级别 |
| 组件 | 围绕风险组件 |
| 模式 | 用途 |
|---|---|
| Interface | 组件 props |
| Type | 联合类型，复杂类型 |
| Generic | 可复用组件 |
| 需求 | 类型 |
|---|---|
| 子元素 | ReactNode |
| 事件处理器 | MouseEventHandler |
| 引用 | RefObject |
| 层级 | 关注点 |
|---|---|
| 单元测试 | 纯函数，hooks |
| 集成测试 | 组件行为 |
| 端到端测试 | 用户流程 |
| ❌ 不要 | ✅ 应该 |
|---|---|
| 深层 prop 传递 | 使用 context |
| 巨型组件 | 拆分为更小的组件 |
| 为所有事情使用 useEffect | 服务器组件 |
| 过早优化 | 先进行性能分析 |
| 使用索引作为 key | 稳定的唯一 ID |
记住： React 的核心是组合。构建小的组件，并深思熟虑地进行组合。
每周安装量
286
代码仓库
GitHub 星标数
23.5K
首次出现
Jan 25, 2026
安全审计
安装于
opencode236
gemini-cli233
codex227
github-copilot223
claude-code211
cursor202
Principles for building production-ready React applications.
| Type | Use | State |
|---|---|---|
| Server | Data fetching, static | None |
| Client | Interactivity | useState, effects |
| Presentational | UI display | Props only |
| Container | Logic/state | Heavy state |
| Pattern | Extract When |
|---|---|
| useLocalStorage | Same storage logic needed |
| useDebounce | Multiple debounced values |
| useFetch | Repeated fetch patterns |
| useForm | Complex form state |
| Complexity | Solution |
|---|---|
| Simple | useState, useReducer |
| Shared local | Context |
| Server state | React Query, SWR |
| Complex global | Zustand, Redux Toolkit |
| Scope | Where |
|---|---|
| Single component | useState |
| Parent-child | Lift state up |
| Subtree | Context |
| App-wide | Global store |
| Hook | Purpose |
|---|---|
| useActionState | Form submission state |
| useOptimistic | Optimistic UI updates |
| use | Read resources in render |
| Use Case | Prefer |
|---|---|
| Reusable logic | Custom hook |
| Render flexibility | Render props |
| Cross-cutting | Higher-order component |
| Signal | Action |
|---|---|
| Slow renders | Profile first |
| Large lists | Virtualize |
| Expensive calc | useMemo |
| Stable callbacks | useCallback |
| Scope | Placement |
|---|---|
| App-wide | Root level |
| Feature | Route/feature level |
| Component | Around risky component |
| Pattern | Use |
|---|---|
| Interface | Component props |
| Type | Unions, complex |
| Generic | Reusable components |
| Need | Type |
|---|---|
| Children | ReactNode |
| Event handler | MouseEventHandler |
| Ref | RefObject |
| Level | Focus |
|---|---|
| Unit | Pure functions, hooks |
| Integration | Component behavior |
| E2E | User flows |
| ❌ Don't | ✅ Do |
|---|---|
| Prop drilling deep | Use context |
| Giant components | Split smaller |
| useEffect for everything | Server components |
| Premature optimization | Profile first |
| Index as key | Stable unique ID |
Remember: React is about composition. Build small, combine thoughtfully.
Weekly Installs
286
Repository
GitHub Stars
23.5K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode236
gemini-cli233
codex227
github-copilot223
claude-code211
cursor202
Vue.js测试最佳实践：Vue 3组件、组合式函数、Pinia与异步测试完整指南
3,700 周安装
