AICODING / DEMO
下载 Markdown 原文 ↗运行示例 ↗

什么是组件化开发？

📖 概述

组件化开发是一种将复杂系统分解为独立、可复用、可组合的组件的软件开发方法。每个组件包含自己的逻辑、样式和结构，可以独立开发、测试和维护，然后组合成完整的应用。

🌟 核心理念

1. 单一职责

  • 每个组件负责一个明确的功能
  • 高内聚、低耦合
  • 职责单一易于理解和测试

2. 可复用性

  • 组件可在多处使用
  • 一次编写，多处使用
  • 提高开发效率

3. 可组合性

  • 组件可嵌套组合
  • 灵活组合构建复杂 UI
  • 像搭积木一样构建应用

4. 独立性

  • 组件内部自包含
  • 对外部依赖最小
  • 可独立开发和测试

💻 组件结构

1. 基本组成

组件/
├── index.tsx           # 组件入口
├── Component.tsx       # 组件逻辑
├── Component.module.css # 样式文件
├── Component.test.tsx  # 单元测试
└── Component.stories.tsx # Storybook 故事

2. React 示例

// Button.jsx
import React from 'react'
import './Button.css'

export function Button({ children, variant = 'primary', ...props }) {
  return (
    <button className={`btn btn-${variant}`} {...props}>
      {children}
    </button>
  )
}

// 使用
<Button variant="secondary" onClick={() => {}}>
  提交
</Button>

3. Vue 示例

<!-- Button.vue -->
<template>
  <button :class="['btn', `btn-${variant}`]" v-bind="$attrs">
    <slot />
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    variant: {
      type: String,
      default: 'primary'
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

📊 组件分类

1. 原子组件（Atomic）

  • 最基础的组件
  • 不能继续拆分
  • 示例：Button、Input、Icon

2. 分子组件（Molecular）

  • 由原子组件组成
  • 实现特定功能
  • 示例：SearchBox、CardHeader

3. 有机体组件（Organism）

  • 更复杂的组件
  • 包含多个分子组件
  • 示例：Header、Sidebar、ProductCard

4. 模板组件（Template）

  • 页面布局组件
  • 定义结构
  • 示例：PageLayout、FormLayout

5. 页面组件（Page）

  • 具体的页面
  • 业务逻辑所在地
  • 示例：HomePage、ProfilePage

🔄 组件通信

1. Props / Props（父传子）

// 父组件
function Parent() {
  return <Child name="Alice" age={25} />
}

// 子组件
function Child(props) {
  return <div>{props.name}, {props.age}</div>
}

2. Emits（子传父）

// 子组件
function Child({ onSubmit }) {
  const handleClick = () => {
    onSubmit('数据')
  }
  return <button onClick={handleClick}>提交</button>
}

// 父组件
function Parent() {
  const handleSubmit = (data) => {
    console.log('收到:', data)
  }
  return <Child onSubmit={handleSubmit} />
}

3. Context（跨层级）

// 创建 Context
const ThemeContext = React.createContext()

// 提供者
function ThemeProvider({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  )
}

// 消费者
function Button() {
  const theme = useContext(ThemeContext)
  return <button className={theme}>按钮</button>
}

4. 状态管理（全局）

// Redux / Zustand
const useStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}))

function Component() {
  const { count, increment } = useStore()
  return <button onClick={increment}>{count}</button>
}

🎯 组件设计原则

1. 开放封闭原则

  • 对扩展开放：可添加新功能
  • 对修改封闭：不影响现有组件

2. 里氏替换原则

  • 子组件可替换父组件
  • 类型兼容

3. 依赖倒置原则

  • 依赖抽象而非具体
  • 解耦组件依赖

4. 接口隔离原则

  • 接口最小化
  • 避免不必要的依赖

📦 组件库

React 生态

  • Ant Design：企业级 UI 库
  • Material-UI：Material Design 实现
  • Chakra UI：模块化组件库
  • Headless UI：无样式组件

Vue 生态

  • Element Plus：Vue 3 UI 库
  • Ant Design Vue：Ant Design 的 Vue 实现
  • Vuetify：Material Design 框架
  • Quasar：响应式框架

🛠️ 开发工具

1. Storybook

  • 独立开发组件
  • 可视化展示
  • 交互式测试

2. Testing Library

  • 组件单元测试
  • 用户行为测试
  • DOM 测试

3. Bit / Nx

  • 组件共享平台
  • 多项目组件管理
  • 版本控制

✅ 优缺点

优点

  • ✅ 提高代码复用性
  • ✅ 降低维护成本
  • ✅ 提升开发效率
  • ✅ 团队协作友好
  • ✅ 易于测试
  • ✅ UI 一致性

缺点

  • ❌ 学习成本（设计模式）
  • ❌ 过度设计风险
  • ❌ 组件通信复杂
  • ❌ 版本管理挑战
  • ❌ 初始开发时间长

🎯 最佳实践

  1. 保持组件职责单一
  2. 使用 PropTypes/TypeScript
  3. 合理拆分组件层级
  4. 避免组件过度嵌套
  5. 文档和示例
  6. 单元测试覆盖
  7. Storybook 故事文档
  8. 持续重构优化

📚 学习资源

🔗 相关链接

本页目录 ↑