react-patterns by claudiodearaujo/izacenter
npx skills add https://github.com/claudiodearaujo/izacenter --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 |
| 渲染灵活性 | 渲染属性 |
| 横切关注点 | 高阶组件 |
| 信号 | 行动 |
|---|---|
| 渲染缓慢 | 先进行性能分析 |
| 大型列表 | 虚拟化 |
| 昂贵计算 | useMemo |
| 稳定回调 | useCallback |
| 范围 | 放置位置 |
|---|---|
| 应用全局 | 根级别 |
| 功能模块 | 路由/功能级别 |
| 组件 | 围绕风险组件 |
| 模式 | 用途 |
|---|---|
| 接口 | 组件 Props |
| 类型别名 | 联合类型,复杂类型 |
| 泛型 | 可复用组件 |
| 需求 | 类型 |
|---|---|
| 子元素 | ReactNode |
| 事件处理器 | MouseEventHandler |
| 引用 | RefObject |
| 级别 | 关注点 |
|---|---|
| 单元测试 | 纯函数,Hook |
| 集成测试 | 组件行为 |
| 端到端测试 | 用户流程 |
| ❌ 不要 | ✅ 要做 |
|---|---|
| 深层 Props 透传 | 使用 Context |
| 巨型组件 | 拆分成更小的 |
| 为所有事情使用 useEffect | 服务端组件 |
| 过早优化 | 先进行性能分析 |
| 使用索引作为 key | 稳定的唯一 ID |
记住: React 是关于组合的。构建小的组件,并深思熟虑地组合它们。
每周安装次数
1
代码仓库
GitHub 星标数
1
首次出现
1 天前
安全审计
安装于
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
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
1
Repository
GitHub Stars
1
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketFailSnykPass
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
TanStack Query v5 完全指南:React 数据管理、乐观更新、离线支持
2,500 周安装
Novel Writer 小说创作工作流指南:7步系统化方法,AI辅助写作与质量分析
1,000 周安装
PHP 8.x 最佳实践指南:51条规则掌握现代PHP开发、PSR标准与SOLID原则
1,100 周安装
MySQL 最佳实践指南:存储引擎、索引优化与性能调优技巧
1,100 周安装
Base44 JavaScript SDK 使用指南 - 在 Base44 平台构建应用程序
1,000 周安装
Element Plus Vue3 使用指南:安装、配置、组件详解与问题排查
1,100 周安装
Redis最佳实践指南:数据结构、缓存模式与性能优化完整教程
1,100 周安装