如何设计一个组件

设计一个组件时，不仅仅是写代码，而是要创建一个 可复用、可维护、可扩展 的 UI 功能模块。

原则

组件设计要遵循的基本原则：

原则	解释
单一职责	组件要专注于一件事
可读性强	代码命名清晰
开放封闭	对扩展开放，对修改关闭
可扩展	能够支持更多场景
可复用	独立、不依赖具体业务
低耦合	减少与外部依赖

步骤

1️⃣ 明确需求 & 使用场景

• 组件要解决什么问题？
• 由谁来使用？在什么页面被使用？
• 是否需要复用？复用的方式是什么？

✅ 示例：设计一个 Button

• 支持不同尺寸、类型（主按钮/次按钮/危险按钮）
• 可设置 loading
• 可禁用

2️⃣ 输入输出设计

组件的核心是：输入（props）→ 输出（UI 或 Events）

设计时要问：

• 是否支持双向绑定？
• 是否支持扩展？
• 默认值是什么？

✅ 示例：Button Props 定义：

Prop	类型	必传	作用
type	primary / default / danger	否	样式类型
size	small / medium / large	否	尺寸
disabled	boolean	否	禁用
loading	boolean	否	加载状态
onClick	function	否	点击事件

3️⃣ UI & State 设计

组件自身是否需要内部 state：

• “纯组件”：只根据 props 渲染 → 不需要内部 state
• “有状态组件”：包含交互逻辑 → 需要内部 state

✅ Button 是否需要 state：

• loading 的状态通常交给父组件管理 → 无需内部 state
• 尽量保持组件 可控、可预测

4️⃣ 交互逻辑与可访问性

需要考虑：

• Keyboard 操作（Tab、Enter）
• ARIA 属性
• 动效是否友好
• 各状态反馈（hover / active / disabled）

5️⃣ 扩展与可维护性

组件不能只为当前场景写死：

• 是否支持主题切换？
• 是否支持 className、style 自定义？
• 是否支持图标插槽（slot/children）？

6️⃣ 文档与使用示例

一个组件如果没有文档，就不算真正完成，应包含：

• API 文档
• Demo 示例
• 禁用示例 / loading 示例等状态说明

总结

一个优秀的组件 = 清晰场景 ➜ 合理设计 Props ➜ 稳定交互 ➜ 易扩展 & 有文档

流程：需求 → Props/事件 → 状态 → UI 交互 → 扩展性 → 文档