提取组件 (extract)

提取组件（extract）

概述

extract 是从现有代码中提取可复用组件的技能。它的核心是：识别重复模式，创建可复用组件，建立设计系统。

作为开发者，你可能遇到过：

“这个按钮我复制了 20 份”
“每次都要重新写同样的代码”
“想改一个样式要改 50 个地方”

extract 就是解决这些的。

为什么需要提取

1. 减少重复

复制粘贴 10 次
↓
1 个组件复用 10 次

结果：
- 代码量减少 80%
- 修改一处，全部生效

2. 保持一致

每次手动调整样式
↓
使用统一组件

结果：
- 视觉一致
- 体验一致

3. 提升效率

从零开始写
↓
复用现有组件

结果：
- 开发速度提升 50%+
- 质量更高

提取步骤

第一步：识别重复

检查项目中重复出现的模式：

UI 组件：

按钮（不同样式）
输入框
卡片
弹窗

代码模式：

相似的函数
相似的逻辑
相似的数据结构

第二步：归类

将相似的元素归类：

类别	频率	示例
核心组件	高频	Button, Input, Card
业务组件	中频	UserCard, ProductCard
页面组件	低频	LoginPage, Dashboard

第三步：提取

原代码（有重复）：
<button class="btn-primary">点击</button>
<button class="btn-primary">提交</button>
<button class="btn-primary">确认</button>

提取后：
Button 组件：
- variant: primary / secondary / danger / text
- size: sm / md / lg
- disabled: boolean
- loading: boolean

第四步：建立 Design Token

将常用值提取为变量：

颜色：
--color-primary
--color-success
--color-error

间距：
--spacing-xs (4px)
--spacing-sm (8px)
--spacing-md (16px)
--spacing-lg (24px)

实践案例

案例 1：按钮组件提取

问题：项目中 50 个按钮，样式各不相同

提取后：

Button 组件属性：

variant: primary/secondary/danger/text
size: sm/md/lg
disabled: boolean
loading: boolean

使用方式：

<Button variant="primary" size="md">提交</Button>
<Button variant="secondary" size="sm">取消</Button>
<Button variant="danger" loading>删除中...</Button>

案例 2：卡片组件提取

问题：3 种不同的卡片样式

提取后：

Card 组件属性：

variant: default/simple/featured
padding: sm/md/lg
hoverable: boolean

案例 3：表单组件提取

问题：每个表单都重新写验证逻辑

提取后：

Form 组件：

onSubmit: function
validation: schema
error handling: automatic

组件设计原则

1. 单一职责

一个组件只做一件事

正确：
- Button 只管按钮
- Input 只管输入

错误：
- Button 包含验证逻辑
- Input 包含样式

2. 灵活配置

通过 props 控制行为

正确：
variant: 'primary' | 'secondary'
size: 'sm' | 'md' | 'lg'

错误：
创建 10 个不同的按钮组件

3. 合理默认值

提供合理的默认配置

正确：
size 默认 md
variant 默认 primary

错误：
每次都要传所有参数

速查卡片

提取步骤

识别重复 → 归类 → 提取 → 建立 Token

组件原则

单一职责、灵活配置、合理默认值

好处

减少重复、保持一致、提升效率

与其他技能

normalize - 规范化
distill - 精简
polish - 打磨

查看源文件: GitHub原始文件