组件化是什么？编程中的核心概念与实践解析

// 组件接口定义示例
interface UserService {
  createUser(userData: UserCreateDto): Promise<User>
  updateUser(id: string, userData: UserUpdateDto): Promise<User>
  deleteUser(id: string): Promise<boolean>
  findUserById(id: string): Promise<User | null>
  findUsersByCriteria(criteria: UserSearchCriteria): Promise<User[]>
}
 
// 数据传输对象定义
interface UserCreateDto {
  username: string
  email: string
  password: string
  profile?: UserProfile
}

// React组件示例 - 可复用的用户卡片组件
import React from 'react'
import PropTypes from 'prop-types'
 
const UserCard = ({ user, onEdit, onDelete, showActions = true }) => {
  const handleEdit = () => {
    onEdit && onEdit(user.id)
  }
  
  const handleDelete = () => {
    onDelete && onDelete(user.id)
  }
  
  return (
    <div className="user-card">
      <div className="user-avatar">
        <img src={user.avatar} alt={user.name} />
      </div>
      <div className="user-info">
        <h3>{user.name}</h3>
        <p>{user.email}</p>
        <span className="user-role">{user.role}</span>
      </div>
      {showActions && (
        <div className="user-actions">
          <button onClick={handleEdit} className="btn-edit">编辑</button>
          <button onClick={handleDelete} className="btn-delete">删除</button>
        </div>
      )}
    </div>
  )
}
 
UserCard.propTypes = {
  user: PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    avatar: PropTypes.string,
    role: PropTypes.string
  }).isRequired,
  onEdit: PropTypes.func,
  onDelete: PropTypes.func,
  showActions: PropTypes.bool
}
 
export default UserCard

// 事件总线实现
class EventBus {
  constructor() {
    this.events = {}
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = []
    }
    this.events[event].push(callback)
  }
  
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data))
    }
  }
  
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback)
    }
  }
}
 
// 使用示例
const eventBus = new EventBus()
 
// 组件A发布事件
componentA.publishData = (data) => {
  eventBus.emit('dataUpdated', data)
}
 
// 组件B订阅事件
componentB.subscribeToUpdates = () => {
  eventBus.on('dataUpdated', (data) => {
    this.updateDisplay(data)
  })
}

// Redux状态管理示例
import { createStore } from 'redux'
 
// 定义action类型
const ActionTypes = {
  ADD_COMPONENT: 'ADD_COMPONENT',
  REMOVE_COMPONENT: 'REMOVE_COMPONENT',
  UPDATE_COMPONENT: 'UPDATE_COMPONENT'
}
 
// 定义reducer
const componentReducer = (state = { components: [] }, action) => {
  switch (action.type) {
    case ActionTypes.ADD_COMPONENT:
      return {
        ...state,
        components: [...state.components, action.payload]
      }
    case ActionTypes.REMOVE_COMPONENT:
      return {
        ...state,
        components: state.components.filter(c => c.id !== action.payload)
      }
    case ActionTypes.UPDATE_COMPONENT:
      return {
        ...state,
        components: state.components.map(c => 
          c.id === action.payload.id ? { ...c, ...action.payload } : c
        )
      }
    default:
      return state
  }
}
 
// 创建store
const store = createStore(componentReducer)
 
// 组件订阅状态变化
store.subscribe(() => {
  const state = store.getState()
  console.log('Current components:', state.components)
})

"创建一个用户管理组件，包含用户列表展示、添加用户、编辑用户和删除用户功能"

// TRAE IDE生成的组件通信代码示例
// 父组件
import React, { useState, useCallback } from 'react'
import UserList from './components/UserList'
import UserForm from './components/UserForm'
 
const UserManagement = () => {
  const [selectedUser, setSelectedUser] = useState(null)
  const [refreshKey, setRefreshKey] = useState(0)
  
  // TRAE IDE生成的优化回调函数
  const handleUserSelect = useCallback((user) => {
    setSelectedUser(user)
  }, [])
  
  const handleUserUpdate = useCallback(() => {
    setSelectedUser(null)
    setRefreshKey(prev => prev + 1) // 触发列表刷新
  }, [])
  
  return (
    <div className="user-management">
      <UserList 
        onUserSelect={handleUserSelect}
        refreshKey={refreshKey}
      />
      <UserForm 
        selectedUser={selectedUser}
        onUserUpdate={handleUserUpdate}
      />
    </div>
  )
}

// 组件开发规范示例
/**
 * Component: UserCard
 * Description: 用户信息显示卡片组件
 * Author: Team A
 * Version: 1.2.0
 * Last Modified: 2025-10-18
 */
 
import React from 'react'
import PropTypes from 'prop-types'
import './UserCard.css'
 
const UserCard = ({ user, onEdit, onDelete }) => {
  // 组件实现
}
 
// 标准化prop类型定义
UserCard.propTypes = {
  user: PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    avatar: PropTypes.string,
    role: PropTypes.oneOf(['admin', 'user', 'guest'])
  }).isRequired,
  onEdit: PropTypes.func,
  onDelete: PropTypes.func
}
 
// 默认值规范
UserCard.defaultProps = {
  onEdit: () => {},
  onDelete: () => {}
}
 
export default UserCard