组件设计

一、是什么

组件设计是指将 UI 和业务逻辑拆分为高内聚、低耦合的模块单元。

二、为什么

好的组件设计可以：

• 提升复用性
• 提高开发效率
• 降低维护成本

三、核心原则

1. 单一职责

一个组件只做一件事

2. 可复用性

<Button type="primary" loading />

👉 避免写死业务逻辑

3. 可组合性（Composition）

<Card>
  <Card.Header />
  <Card.Body />
</Card>

4. 受控 / 非受控

// 受控
<Input value={value} onChange={setValue} />

// 非受控
<Input defaultValue="test" />

四、高级设计

• Headless UI（逻辑与 UI 分离）
• Hooks 抽离逻辑
• Compound Component（复合组件）

五、最佳实践

• Props 设计清晰（类型 + 默认值）
• 避免 Props drilling → Context
• 业务组件 vs 通用组件分层