生命周期总结

Vue

创建（created）前后
挂载（mounted）前后
更新（update）前后
销毁（vue2： destroyed，vue3： unmounted）前后

keepalive周期

onActivated：首次进入及每次从缓存进入
onDeactivated：离开及销毁时

父子组件调用顺序

挂载: 父 created前后 -> 父mounted 前 -> 子 created前后 -> 子mounted前后 -.> 父mounted后
更新：父update 前 -> 子update前后 -> 父update 后
销毁：父destroyed前 -> 子destroyed前后 -> 父destroyed后

React

挂载

constructor(): 在 React 组件挂载之前，会调用它的构造函数。
getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

更新

getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
render(): render() 方法是 class 组件中唯一必须实现的方法。
getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
componentDidUpdate(): 在更新后会被立即调用。

卸载

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

父子组件调用顺序

进入页面：parent-constructor -> parent-getDerivedStateFromProps -> parent-render -> child-constructor -> child-getDerivedStateFromProps -> child-render -> child-componentDidMount -> parent-componentDidMount

更新页面：parent-getDerivedStateFromProps -> parent-shouldComponentUpdate -> parent-render -> child-getDerivedStateFromProps -> child-shouldComponentUpdate -> child-render -> child-componentDidUpdate -> parent-componentDidUpdate

销毁页面：parent-componentWillUnmount -> child-componentWillUnmount