react-patterns by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill react-patterns构建生产级 React 应用程序的原则。
| 类型 | 用途 | 状态 |
|---|---|---|
| 服务端组件 | 数据获取，静态内容 | 无 |
| 客户端组件 | 交互性 | useState, 副作用 |
| 展示型组件 | UI 展示 | 仅 Props |
| 容器型组件 | 逻辑/状态 | 复杂状态 |
广告位招租
在这里展示您的产品或服务
触达数万 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 |
| 层级 | 关注点 |
|---|---|
| 单元测试 | 纯函数，Hook |
| 集成测试 | 组件行为 |
| 端到端测试 | 用户流程 |
| ❌ 不要 | ✅ 应该 |
|---|---|
| 深层 Props 透传 | 使用 Context |
| 巨型组件 | 拆分为小组件 |
| 所有事情都用 useEffect | 使用服务端组件 |
| 过早优化 | 先进行性能分析 |
| 使用索引作为 key | 使用稳定的唯一 ID |
记住： React 的核心是组合。构建小巧的组件，并深思熟虑地组合它们。
此技能适用于执行概述中描述的工作流程或操作。
每周安装量
428
代码仓库
GitHub 星标数
27.6K
首次出现
2026 年 1 月 20 日
安全审计
安装于
opencode352
gemini-cli343
codex309
claude-code307
cursor297
antigravity284
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.
This skill is applicable to execute the workflow or actions described in the overview.
Weekly Installs
428
Repository
GitHub Stars
27.6K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode352
gemini-cli343
codex309
claude-code307
cursor297
antigravity284
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
106,200 周安装
