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、数据的移除等操作

posted @ 2019-06-11 19:52  GaGaPei  阅读(596)  评论(0编辑  收藏  举报