react的生命周期

1、React中的生命周期有哪些？
constructor
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

2、React中组件第一次执行的时候会执行哪些生命周期函数
constructor
componentWillMount
render
componentDidMount

3、render函数什么时候会执行？
当this.state/this.props发生改变的时候

4、当this.props/this.state发生改变的时候会执行哪些生命周期
this.props
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

this.state
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

5、React中哪些生命周期会执行一次，哪些生命周期会执行多次
多次
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

一次
constructor
componentWillMount
componentDidMount
componentWillUnmount

constructor:
1、组件的初始化，用来定义当前组件所需要的一些状态，状态定义在this.state中。
2、当前生命周期中必须书写super，否则this的指向会发生错误以及报错
3、在当前生命周期中默认是访问不到props属性的，如果想要进行访问必须在super以及constructor中添加参数props

componentWillMount:
挂载前：
1、可以进行前后端数据的请求(在服务端渲染的时候)
2、可以在数据第一次被渲染的时候做数据的更改
3、在当前生命周期中尽量不要调用this.setState因为当前生命周期函数执行完毕后，会自动执行render函数
4、可以将外部的数据转换为内部的数据

5 . 在这里修改数据可以不用this.setState，直接用this.state.

注意:当前生命周期在17.0中已经废除掉了

render：
1、当前生命周期用来进行数据与模板的结合
2、render函数第一次执行的时候会将渲染的数据在内存中保存一份，当第二次数据发生了改变后，render会将这次的虚拟DOM与
缓存中的虚拟DOM进行对比 这种对比叫做DIFF算法

3、只要this.state/this.props发生了改变那么render函数就会执行

componentDidMount：
挂载后：
1、当前生命周期我们可以做前后端数据的交互

2、可以在当前生命周期中获取到真实的DOM 通过this.refs来获取

3、一般情况下我们都在当前生命周期中做一些插件的实例化
new Swiper('')

操作真实DOM的方式
ref="h2" this.refs.h2
ref={(el)=>{this.dom = el}} this.dom

componentWillReceiveProps
1、当this.props发生改变的时候当前函数就会执行
2、当前函数中会有一个参数 这个参数是一个新的props
3、在当前生命周期函数中我们可以对新的props做修改
4、当前生命周期函数在17.0中废除掉了

shouldComponentUpdate
1、当this.state/this.props被修改的时候会执行当前生命周期函数

2、当前生命周期执行的时候必须返回一个true或者是false 返回值决定了render函数是否会执行，如果为true则render函数执行
false则render函数不会执行

3、如果返回值为true则下面的生命周期会执行，如果为false则下面的生命周期不会执行

4、当前生命周期特别重要，因为当前生命可以做React的性能优化,(根据比较新旧的state/props来进行对)

5、当前生命周期函数中有2个参数一个是新的props 一个是新的state

6、当期生命周期决定的是render函数是否执行，而不是数据是否修改

componentWillUpdate
更新前：
1、在当前生命周期中我们可以对更新的数据做最后的修改
2、当前生命周期中有2个参数 一个是新的props一个是新的state

componentDidUpdate:
更新后
1、当前生命周期中我们可以获取到数据更新后最新的DOM结构
2、注意当前生命周期会执行多次，所以当你需要做业务逻辑操作的时候一定要判断

componentWillUnmount:
卸载
1、当前生命周期执行的时候我们需要做事件的解绑
2、数据的移除等操作