React 模式大全：组件设计、Hook 模式、状态管理与性能优化最佳实践

react-patterns by claudiodearaujo/izacenter

1 周安装量

1 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/claudiodearaujo/izacenter --skill react-patterns

React 代码质量性能优化前端架构

🇨🇳中文介绍

React 模式

构建生产就绪的 React 应用程序的原则。

1. 组件设计原则

组件类型

类型	用途	状态
服务端组件	数据获取，静态	无
客户端组件	交互性	useState，副作用
展示型组件	UI 显示	仅 Props
容器组件	逻辑/状态	重度状态

设计规则

每个组件单一职责
Props 向下传递，事件向上冒泡
组合优于继承
倾向于小而专注的组件

2. Hook 模式

何时提取 Hook

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. 状态管理选择

复杂度	解决方案
简单	useState，useReducer
共享局部状态	Context
服务端状态	React Query，SWR
复杂全局状态	Zustand，Redux Toolkit

范围	位置
单一组件	useState
父子组件	状态提升
子树	Context
应用全局	全局存储

Hook	用途
useActionState	表单提交状态
useOptimistic	乐观 UI 更新
use	在渲染中读取资源

自动记忆化
减少手动 useMemo/useCallback
专注于纯组件

父组件提供上下文
子组件消费上下文
灵活的基于插槽的组合
示例：Tabs，Accordion，Dropdown

渲染属性 vs Hook

使用场景	首选
可复用逻辑	自定义 Hook
渲染灵活性	渲染属性
横切关注点	高阶组件

信号	行动
渲染缓慢	先进行性能分析
大型列表	虚拟化
昂贵计算	useMemo
稳定回调	useCallback

检查是否真的慢
使用 DevTools 进行性能分析
识别瓶颈
应用针对性修复

范围	放置位置
应用全局	根级别
功能模块	路由/功能级别
组件	围绕风险组件

显示备用 UI
记录错误
提供重试选项
保留用户数据

8. TypeScript 模式

模式	用途
接口	组件 Props
类型别名	联合类型，复杂类型
泛型	可复用组件

需求	类型
子元素	ReactNode
事件处理器	MouseEventHandler
引用	RefObject

级别	关注点
单元测试	纯函数，Hook
集成测试	组件行为
端到端测试	用户流程

用户可见的行为
边界情况
错误状态
可访问性

❌ 不要	✅ 要做
深层 Props 透传	使用 Context
巨型组件	拆分成更小的
为所有事情使用 useEffect	服务端组件
过早优化	先进行性能分析
使用索引作为 key	稳定的唯一 ID

记住： React 是关于组合的。构建小的组件，并深思熟虑地组合它们。

🇺🇸English

React Patterns

Principles for building production-ready React applications.

1. Component Design Principles

Component Types

Type	Use	State
Server	Data fetching, static	None
Client	Interactivity	useState, effects
Presentational	UI display	Props only
Container	Logic/state	Heavy state

Design Rules

One responsibility per component
Props down, events up
Composition over inheritance
Prefer small, focused components

2. Hook Patterns

When to Extract Hooks

Pattern	Extract When
useLocalStorage	Same storage logic needed
useDebounce	Multiple debounced values
useFetch	Repeated fetch patterns
useForm	Complex form state

Hook Rules

Hooks at top level only
Same order every render
Custom hooks start with "use"
Clean up effects on unmount

3. State Management Selection

Complexity	Solution
Simple	useState, useReducer
Shared local	Context
Server state	React Query, SWR
Complex global	Zustand, Redux Toolkit

State Placement

Scope	Where
Single component	useState
Parent-child	Lift state up
Subtree	Context
App-wide	Global store

4. React 19 Patterns

New Hooks

Hook	Purpose
useActionState	Form submission state
useOptimistic	Optimistic UI updates
use	Read resources in render

Compiler Benefits

Automatic memoization
Less manual useMemo/useCallback
Focus on pure components

5. Composition Patterns

Compound Components

Parent provides context
Children consume context
Flexible slot-based composition
Example: Tabs, Accordion, Dropdown

Render Props vs Hooks

Use Case	Prefer
Reusable logic	Custom hook
Render flexibility	Render props
Cross-cutting	Higher-order component

6. Performance Principles

When to Optimize

Signal	Action
Slow renders	Profile first
Large lists	Virtualize
Expensive calc	useMemo
Stable callbacks	useCallback

Optimization Order

Check if actually slow
Profile with DevTools
Identify bottleneck
Apply targeted fix

7. Error Handling

Error Boundary Usage

Scope	Placement
App-wide	Root level
Feature	Route/feature level
Component	Around risky component

Error Recovery

Show fallback UI
Log error
Offer retry option
Preserve user data

8. TypeScript Patterns

Props Typing

Pattern	Use
Interface	Component props
Type	Unions, complex
Generic	Reusable components

Common Types

Need	Type
Children	ReactNode
Event handler	MouseEventHandler
Ref	RefObject

9. Testing Principles

Level	Focus
Unit	Pure functions, hooks
Integration	Component behavior
E2E	User flows

Test Priorities

User-visible behavior
Edge cases
Error states
Accessibility

10. Anti-Patterns

❌ 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

Repository

claudiodearaujo…zacenter

GitHub Stars

First Seen

1 day ago

Security Audits

Gen Agent Trust HubPass SocketFail SnykPass

Installed on

zencoder1

amp1

cline1

openclaw1

opencode1

cursor1

TanStack Query v5 完全指南：React 数据管理、乐观更新、离线支持

2,500 周安装

useLocalStorage	需要相同的存储逻辑
useDebounce	多个防抖值
useFetch	重复的获取模式
useForm	复杂的表单状态

React 模式大全：组件设计、Hook 模式、状态管理与性能优化最佳实践

🇨🇳中文介绍

React 模式

1. 组件设计原则

组件类型

设计规则

2. Hook 模式

何时提取 Hook

相关 Skills

Hook 规则

3. 状态管理选择

状态放置

4. React 19 模式

新 Hook

编译器优势

5. 组合模式

复合组件