前端框架生命周期

1.React生命周期

• 挂载阶段（Mounting）：组件被实例化，插入DOM中。

  • constructor：初始化组件的状态和绑定方法。
  • render：根据组件的状态和属性生成虚拟DOM。
  • componentDidMount：组件渲染完成后触发，通常用于发送异步请求、添加事件监听等操作。

• 更新阶段（Updating）：组件重新渲染，通常是由于组件的状态或属性发生变化。

  • static getDerivedStateFromProps：根据新的属性值更新状态。
  • shouldComponentUpdate：确定是否重新渲染组件。
  • render：根据新的状态和属性生成新的虚拟DOM。
  • componentDidUpdate：组件更新完成后触发，通常用于处理DOM更新后的操作。

• 卸载阶段（Unmounting）：组件从DOM中移除。

  • componentWillUnmount：组件将被销毁前触发，通常用于清除定时器、取消订阅等资源释放操作。

 2.Vue生命周期

• 创建阶段：实例化Vue对象。

  • beforeCreate：在实例初始化之后，数据观测和事件配置之前执行。
  • created：实例创建完成后执行，可以访问数据、方法和DOM，但尚未挂载到DOM上。

• 挂载阶段：

  • beforeMount：在模板编译、挂载之前执行。
  • mounted：实例挂载到DOM上后执行，可以访问DOM元素。

• 更新阶段：

  • beforeUpdate：在数据更新之后，虚拟DOM重新渲染之前执行。
  • updated：虚拟DOM重新渲染和更新完成后执行。

• 销毁阶段：

  • beforeDestroy：实例销毁之前执行，此时实例仍然可用。
  • destroyed：实例销毁后执行，清除事件监听器和定时器，释放资源。

 3.Angular生命周期

• ngOnChanges：在输入属性发生变化时触发。
• ngOnInit：在组件初始化之后执行，通常用于初始化数据和订阅服务。
• ngDoCheck：在每个变更检测周期中执行。
• ngOnDestroy：在组件销毁之前执行，清理工作。

  目录

  1.React生命周期

   2.Vue生命周期

   3.Angular生命周期

  ---