详解react的生命周期

class从创建实例到注销的过程中，经常会需要在某些时刻去执行一些逻辑代码，react每个组件的生命周期中会暴露出很多生命钩子 这些钩子函数会在特定的时刻执行，组件或实例生命周期会经历三个阶段 初始化/运行中/销毁

 

初始化阶段 1.constructor

• 挂载this
• bind函数的this
• 根据属性设置状态

2.componentWillMount

组件即将被挂载，修改state，不会触发update，可以做数据的初始化获取

3.render

返回一段jsx结构，去渲染Dom

当状态更新时，在vue中，vue会判断这条数据有没有使用（在模板中渲染），如果没有，即使改变也不会重新render，在react中，只要状态发送了改变（setState），都会重新渲染。react中的pureComponent也有处理，我们也可以手动的根据生命周期钩子函数来自己做判断，利用shouldComponentUpdate。但也会损耗性能。所以一般来是用react自带的方法来处理。具体使用可以看官方文档

4.componentDidMount

可以操作真实的dom，初始化结束

父组件在render的过程中会触发子组件的初始化阶段，当所有子组件装载完成，父组件才会执行didMount

运行中 5.componentWillReceiveProps

属性变化后执行，在这里，新的属性还没有挂载到this上，参数props是最新的props可以根据变化后的属性去更改自己的状态，此时不会因为状态的改变而去执行额外的钩子函数

6.shouldComponentUpdate

当属性或状态变化后都会执行，没有写这个函数时react内部默认返回true来控制是否执行下面的钩子函数（是否重新渲染），此时this上的props和state还没有更新，最新的需要从参数中获得。这个时候就可以做一些判断，根据数据的变化来避免不必要的重新render，但自己做判断性能太差，react中有一种组件叫纯组件 （pureComponent），可以浅层的对属性/状态的当前值和最新值进行对比，就无需自己做判断。想深入了 解pureComponent的话 可以点这个链接 https://blog.csdn.net/iiichigo/article/details/84196708

7.componentWillUpdate

这个属性相当于vue中的beforeUpdate 此时的this上的props和state还没更新。也不能setState会造成死循环。所以基本没有什么用

8.render

状态或属性改变后，再重新渲染

9.componentDidUpdate

已经重新渲染完成

this上的props和state已经更新，但接收的参数是旧的porps和state，我们就可以根据变化前的数据和变化后的数据进行判断处理。（比如根据某一条的数据的更新，在dom渲染完成后来做一些事情）在vue中我们虽然也有update函数，但不能监听某一条数据无论什么数据的更新都会触发update，于是vue中提供了watch和$nextTick，watch监听某一个数据变化后（此时dom还未更新）再调用$nextTick更新完dom后再做一些操作。在react中我们就可以使用这个钩子函数来实现

销毁阶段 10.componentWillUnmount

销毁之前，还未销毁，这个钩子函数会执行善后工作，因为react组件销毁的时候连带dom一起消失的，所以没有销毁后的钩子函数

在react种如何销毁组件？组件切换的时候/路由切换的时候,当我们调用 ReactDOM.unmountComponentAtNode(element)

以上便是react所有的钩子函数，react没有像vue提供很多方法，于是很多事情我们就可以用生命周期函数来实现。

关于vue的钩子函数可以看我的另一篇博客

https://blog.csdn.net/iiichigo/article/details/83717730