es6类可通过状态机模拟组件生命周期，定义created、mounted、updated、unmounted阶段，用私有_state跟踪状态，基类封装钩子调用、异步支持与错误防护，子类继承后实现对应onxxx方法即可。
ES6 类可以模拟前端组件的生命周期管理，核心是用状态机控制阶段、提供钩子方法供用户扩展，并在关键节点自动触发。不需要框架，几行代码就能搭出可复用的基础结构。
定义生命周期阶段与状态管理
先明确几个基础阶段：created（实例创建）、mounted（挂载到 DOM）、updated（数据更新后）、unmounted（卸载前）。用私有属性 _state 跟踪当前阶段，避免外部篡改：
- 状态值设为字符串（如
'created'、'mounted'），便于调试和判断 - 初始化时立即进入
created阶段，并同步调用onCreated钩子 - 所有状态变更都通过内部方法（如
_setState）统一处理，确保钩子调用可控
封装可继承的基类与钩子调用机制
写一个 Component 基类，把通用逻辑收拢。每个生命周期方法（如 onMounted）默认为空函数，子类可选择性重写：
- 在
mount方法中切换状态为mounted，再调用onMounted - 提供
update方法触发updated流程，适合响应式数据变化后调用 - 暴露
unmount方法清理资源并进入unmounted状态 - 所有钩子调用前加
if (typeof this[hookName] === 'function')判断，避免报错
支持异步钩子与错误防护
实际项目中，onMounted 可能要发请求，需支持 Promise。基类里统一 await 钩子返回值，并捕获异常：
- 在
_callHook工具方法中处理 Promise 和同步函数的统一调用 - 钩子抛错时打印警告但不中断后续流程（除非是关键阶段如 mounted）
- 可加
isMountedgetter 方便子类判断是否处于活跃状态
简单使用示例
子类只需继承 + 实现对应钩子，不用关心执行顺序：
class MyButton extends Component {
constructor(text) {
super();
this.text = text;
}
onCreated() {
console.log('按钮实例已创建');
}
onMounted() {
this.el = document.createElement('button');
this.el.textContent = this.text;
document.body.appendChild(this.el);
}
onUnmounted() {
this.el?.remove();
}
}
const btn = new MyButton('点我');
btn.mount(); // 触发 created → mounted
btn.unmount(); // 触发 unmounted
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
