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，而不是修改原组件源码
