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()