Class实现OOP组件结构的关键是明确职责、封装细节、支持复用与替换：封装状态、行为和接口，通过私有方法隔离实现，用继承定义BaseComponent统一生命周期，以组合和依赖注入替代硬编码耦合。

用 Class 实现符合 OOP 设计模式的组件结构，关键不是堆砌语法，而是让每个类真正承担明确职责、隐藏细节、支持复用与替换。核心在于把“组件”当作有状态、有生命周期、可组合的独立单元来建模，而不是一堆函数和变量的集合。

定义清晰的组件类骨架

一个组件类应封装三类内容：状态（state）、行为（methods）和接口（public API）。避免直接暴露内部字段，用 getter/setter 或专用方法控制访问。

• 在 __init__ 中初始化必需状态，比如 self._is_mounted = False、self._props = {}
• 把 DOM 操作、事件绑定、渲染逻辑封装进私有方法（如 _render()、_bind_events()），外部只调用 mount() 或 update(props)
• 提供一致的生命周期钩子，如 on_init()、on_mount()、on_unmount()，便于继承扩展

用封装隔离实现细节

组件的内部如何渲染、怎么处理事件、状态怎么同步——这些都不该被使用者感知。封装不是加个 private 就完事，而是通过接口设计让误用变难。

• 把真实 DOM 元素存为私有属性（如 self._element），不提供直接读写权限
• 状态更新走统一入口，比如 set_state(new_state)，内部触发重渲染并校验合法性
• 事件监听统一由组件管理，避免外部随意 addEventListener 导致内存泄漏或重复绑定

用继承+多态支持组件复用与定制

基类定义通用能力（如状态管理、生命周期、基础事件），子类专注差异化逻辑。这不是为了“看起来像 OOP”，而是让新组件能天然接入已有体系。

• 抽象出 BaseComponent，包含 mount()、unmount()、force_update() 等标准方法
• 具体组件如 Button、FormInput 继承它，并重写 render_template() 和 handle_click() 等钩子
• 多个组件共用同一套事件总线或状态上下文时，多态能让它们被统一调度，比如 component.destroy() 对所有类型都有效

用组合代替硬编码依赖

组件之间不是父子级联的 DOM 树，而是协作关系。一个表单组件不“拥有”输入框，而是接收输入框实例作为配置项，或通过插槽（slot）注入。

• 支持传入子组件类或工厂函数，而非固定写死某一种子类型
• 用依赖注入方式传递共享服务（如 apiClient、router），降低耦合
• 当需要装饰行为（如加 loading、日志、权限拦截），优先用包装类或 mixin，而不是修改原组件源码