2020: Vue和React生命周期

Vue 生命周期

vue2有9个生命周期钩子
vue3也有9个生命周期钩子

2.x和3.x钩子的对应关系：

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

3.x新增钩子：

onRenderTracked
onRenderTriggered

两个钩子函数都接收一个 DebuggerEvent，与 watchEffect 参数选项中的 onTrack 和 onTrigger。

React 生命周期

react16版本之前有7个生命周期钩子
react16版本之后也有7个生命周期钩子

16版本之前

• componentWillMount (过时)
• componentDidMount
• componentWillReceiveProps (过时)
• shouldComponentUpdate
• componentWillUpdate (过时)
• componentDidUpdate
• componentWillUnmount

16版本之后

• getDeriveStateFromProps (新增)
• componentDidMount
• shouldComponentUpdate
• getSnapshotBeforeUpdate (新增)
• componentDidUpdate
• componentWillUnmount
• componentDidCatch (新增)

React新增的生命周期函数说明

1. getDerivedStateFromProps (nextProps, prevState)
   它配合 componentDidUpdate 周期函数，用来替代 componentWillReceiveProps。
   将原本 componentWillReceiveProps 功能进行划分 —— 更新 state 和 操作/调用 props，很大程度避免了职责不清而导致过多的渲染, 从而影响应该性能。

2. getSnapshotBeforeUpdate (prevProps, prevState)
   用来替代componentWillUpdate；
   在组件更新之前获取一个 snapshot —— 可以将计算得的值或从 DOM 得到的信息传递到 componentDidUpdate(prevProps, prevState, snapshot) 周期函数的第三个参数，常常用于 scroll 位置的定位。

3. componentDidCatch(error, info)
   让开发者可以自主处理错误信息，诸如展示，上报错误等