健康的 React 代码库强调 清晰的数据流、最小的效果 和 可预测的 渲染。优先使用 组合 而非继承；将 效果 视为同步，而非“渲染后执行一切”。
何时提供此工作流
触发条件：
- 道具钻孔 vs 上下文 vs 外部存储；关于 服务器组件（Next）vs 客户端的混淆
- useEffect 螺旋状代码；过时的闭包；双重获取
- 重新渲染性能；大型列表；hydration 问题
初始提供： 使用
六个阶段 ：（1）结构与边界，（2）状态与数据源，（3）Hooks 纪律，（4）效果与事件，（5）性能，（6）测试与 a11y）。确认
React 版本和
框架（普通 CRA、Vite、Next App Router）。
...（以下内容与原文相同，未翻译以保持代码块不变）
Healthy React codebases emphasize clear data flow, minimal effects, and predictable rendering. Prefer composition over inheritance; treat effects as synchronization, not “do something after render” for everything.
When to Offer This Workflow
Trigger conditions:
- Prop drilling vs context vs external stores; confusion on server components (Next) vs client
- useEffect spaghetti; stale closures; double-fetch
- Re-render performance; large lists; hydration issues
Initial offer:
Use six stages: (1) structure & boundaries, (2) state & data sources, (3) hooks discipline, (4) effects & events, (5) performance, (6) testing & a11y). Confirm React version and framework (plain CRA, Vite, Next App Router).
Stage 1: Structure & Boundaries
Goal: Colocate state; split presentational vs container only when it clarifies—not by default.
Practices
- Compound components for flexible APIs; avoid mega-props objects
- In Next App Router: default to Server Components; add
use client at leaves
Stage 2: State & Data Sources
Goal: Local state for UI; server state via React Query/SWR/Apollo as appropriate; avoid duplicating server entities in global stores without sync rules.
Stage 3: Hooks Discipline
Goal: Rules of Hooks satisfied; custom hooks encapsulate reusable stateful logic with clear inputs/outputs.
Practices
- Name hooks
useThing; return stable APIs (objects memoized when needed)
Stage 4: Effects & Events
Goal: Prefer event handlers for user-driven work; useEffect for sync with external systems (subscriptions, non-React widgets).
Practices
- Cleanup subscriptions; abort fetches; list effect dependencies honestly
- Strict Mode double-invoke in dev—write effects idempotent
Stage 5: Performance
Goal: Measure before memo; virtualize long lists; code-split routes.
Practices
useCallback/useMemo when profiling shows benefit—not by default- Concurrent features and Suspense boundaries where supported
Stage 6: Testing & Accessibility
Goal: React Testing Library user-centric queries; focus management and labels for forms.
Final Review Checklist
- [ ] Component boundaries match data ownership
- [ ] Server vs client state strategy clear
- [ ] Hooks and effects used appropriately
- [ ] Performance optimizations evidence-based
- [ ] Tests and a11y basics covered for critical flows
Tips for Effective Guidance
- Derive state when possible instead of storing redundant pieces.
- URL as state for shareable UI state when appropriate.
- Point to state-management skill for Redux/Zustand-scale decisions.
Handling Deviations
- Legacy class components: same principles; hooks migration incremental.
by