---
name: react-component
when: 'React组件, 页面开发, 前端组件, tsx, 新建页面, 新建组件, 组件开发, React开发, 前端开发'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-react-component
asset_kind: pattern
lifecycle_status: active
authority: supporting
routes:
  - '*'
primary_triggers:
  - React组件
  - 页面开发
  - 前端组件
  - tsx
  - 新建页面
  - 新建组件
  - 组件开发
  - React开发
  - 前端开发
priority: P2
specificity: 3
version: 1.0.0
last_reviewed: '2026-05-22'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
status: active
---

## 决策规则
- 必须使用函数组件 + TypeScript，禁止 class 组件
- 组件超过 200 行必须拆分为子组件或提取自定义 Hook
- Props 必须定义 interface，禁止使用 any
- 副作用逻辑必须封装在自定义 Hook 中，组件内只保留渲染和事件处理
- 禁止在组件中直接调用 axios/fetch，必须通过 service 层
- 组件必须使用函数式组件 + Hooks，禁止新写 class 组件
- 组件 Props 必须使用 TypeScript interface 定义，禁止使用 any 或省略类型
- 自定义 Hook 必须以 use 前缀命名（如 useAuth、useForm），且内部必须调用其他 Hook
- 组件必须有 displayName 或文件名可推断用途，禁止 Default、Index 等无意义命名
- 复杂组件必须拆分为 Container + Presentational 模式，逻辑与渲染分离

## 验收项
- [AC-01] 组件为函数式 + TypeScript
- [AC-02] Props 有 interface 类型定义
- [AC-03] 组件不超过 200 行
- [AC-04] 数据请求通过 service 层或 Hook
- [AC-05] 使用函数式组件
- [AC-06] Props 有 TypeScript 类型定义
- [AC-07] 自定义 Hook 以 use 前缀命名
