Vue生命周期 | React生命周期

---

前言

本文主要对Vue生命周期与React生命周期进行简单介绍。

---

一、Vue生命周期

1.初始化

钩子名称	触发时机	说明
beforeCreate	实例初始化之后调用	此时实例刚刚在内存中被创建出来
created	实例创建完成后立即调用	此时实例在内存中已经创建完毕，data和methods已初始化，可以访问data中的数据，调用methods中的方法

2.挂载

钩子名称	触发时机	说明
beforeMount	在挂载开始之前被调用	此时Vue实例还没有挂载到页面
mounted	挂载到实例之后调用	此时Vue实例已经挂载到DOM，可以在这个阶段操作DOM，执行与DOM相关的操作逻辑

3.更新

钩子名称	触发时机	说明
beforeUpdate	数据更新时调用	此时虚拟DOM还未重新渲染
updated	数据更改后调用	此时虚拟DOM已渲染完成

4.销毁

钩子名称	触发时机	说明
beforeUnmount	卸载实例之前调用	在这一步，实例仍完全可用，可以在实例卸载前进行一些清理操作，例如取消事件监听
unmounted	实例卸载之后调用	在实例卸载后，进行一些清理操作，例如销毁定时器

二、React组件的生命周期

React生命周期参考菜鸟教程，链接如下：
React 组件生命周期

1.挂载 Mounting（已插入真实DOM）

当组件实例被创建并插入DOM中时，其生命周期调用顺序如下：

• constructor()
• getDerivedStateFromProps()
• render()
• componentDidMount()

2.更新 Updating（正在被重新渲染）

当组件的state或props发生变化时，组件就会更新。组件更新的生命周期调用顺序如下：

• getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

3.卸载 Unmounting（已移出真实DOM）

当组件从DOM中移除时，调用如下方法：

• componentWillUnmount()：在组件卸载及销毁之前直接调用。