Vue、react父子组件生命周期

Vue 的父子组件生命周期

以下分为三部分，加载渲染阶段——更新阶段——销毁阶段，我们来一一介绍：

1、加载渲染阶段
在加载渲染阶段，一定得等子组件挂载完毕后，父组件才能挂载完毕，所以父组件的 mounted 在最后。
beforeCreate（父组件）
created（父组件）
beforeMount（父组件）
beforeCreate（子组件）
created（子组件）
beforeMount（子组件）
Mounted（子组件）
Mounted（父组件）

2、更新阶段
当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。
beforeUpdate（父组件）
beforeUpdate（子组件）
updated（子组件）
updated（父组件）

3、销毁阶段
beforeDestroy（父组件）
beforeDestroy（子组件）
destroyed（子组件）
destroyed（父组件）

React 的父子组件生命周期

1、挂载阶段：
父组件：constructor()
父组件：static getDerivedStateFromProps()
父组件：render()
子组件：constructor()
子组件：static getDerivedStateFromProps()
子组件：render()
子组件：componentDidMount()
父组件：componentDidMount()

2、更新阶段：
父组件：static getDerivedStateFromProps()
父组件：shouldComponentUpdate()
父组件：render()
子组件：static getDerivedStateFromProps()
子组件：shouldComponentUpdate()
子组件：render()
子组件：getSnapshotBeforeUpdate()
父组件：getSnapshotBeforeUpdate()
子组件：componentDidUpdate()
父组件：componentDidUpdate()

3、卸载阶段：
子组件：componentWillUnmount()
父组件：componentWillUnmount()

Vue3.0 的生命周期
所有生命周期钩子的this上下文都是绑定至实例的。

1、beforeCreate：在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。
2、created：实例创建完成，主要包括数据帧听、计算属性、方法、事件/侦听器，（注意：由于挂在阶段还未开始，因此$el还不可用）。
3、beforeMount：挂在之前调用，render函数首次调用。
4、mounted：实例挂在完成后调用，（注意，mounted不会保证所有子组件都已挂载完成，可以使用$nextTick()）。
5、beforeUpdate：数据发生改变之后，DOM被更新之前调用。
6、updated：在数据更改导致的虚拟DOM重新渲染和更新完毕之后调用（注意，updated不会保证所有子组件都已挂载完成，可以使用$nextTick()）。
7、activated：被keep-alive缓存的组件激活时 调用。
8、deactivated：被keep-alive缓存的组件失活时调用。
9、beforeUnmount：在组件实例卸载之前调用。
10、unmounted：组件实例卸载之后调用（注意，实例所有指令都被解绑，所有侦听器都被移除，所有子组件实例都被卸载）。
11、errorCaptured：在捕获一个来自后代组件的错误时被调用（可以返回false可以阻止该错误继续向上传播。）。
12、renderTracked：跟踪虚拟DOM重新渲染时调用，可用来查看哪个操作跟踪了组件及该操作的目标对象和键。
13、renderTriggered：当虚拟DOM重新渲染被触发时调用，用来监听什么操作触发了重新渲染以及该操作的目标对象和键。
其实一般情况下用的最多的就是组件创建期间的一些声明周期钩子，比如：created、mounted、beforeUnmount（Vue 2.x版本中是beforeDestroy）等。

补充点：setup作为组合式API入口点，其调用时间是在创建组件实例时，在初始 prop 解析之后立即调用。在生命周期方面，它是在beforeCreate钩子之前调用的。

选项式API的生命周期选项与组合式API之间的映射

beforeCreate -> 使用 setup()；
created -> 使用 setup()；
beforeMount -> onBeforeMount；
mounted -> onMounted ；
beforeUpdate -> onBeforeUpdate；
updated -> onUpdated；
activated -> onActivated；
deactivated -> onDeactivated；
beforeUnmount -> onBeforeUnmount；
unmounted -> onUnmounted；
errorCaptured -> onErrorCaptured；
renderTracked -> onRenderTracked；
renderTriggered -> onRenderTriggered