面试题
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
1、constructor:
1、组件的初始化，用来定义当前组件所需要的一些状态，状态定义在this.state中。
2、当前生命周期中必须书写super，否则this的指向会发生错误以及报错
3、在当前生命周期中默认是访问不到props属性的，如果想要进行访问必须在super以及constructor中添加参数props
2、componentWillMount:
挂载前：
1、可以进行前后端数据的请求(在服务端渲染的时候)
2、可以在数据第一次被渲染的时候做数据的更改
3、在当前生命周期中尽量不要调用this.setState因为当前生命周期函数执行完毕后，会自动执行render函数
4、可以将外部的数据转换为内部的数据
注意:当前生命周期在17.0中已经废除掉了
3、render：
1、当前生命周期用来进行数据与模板的结合
2、render函数第一次执行的时候会将渲染的数据在内存中保存一份，当第二次数据发生了改变后，render会将这次的虚拟DOM与缓存中的虚拟DOM进行对比 这种对比叫做DIFF算法
3、只要this.state/this.props发生了改变那么render函数就会执行
4、componentDidMount：
挂载后：
1、当前生命周期我们可以做前后端数据的交互
2、可以在当前生命周期中获取到真实的DOM 通过this.refs来获取
3、一般情况下我们都在当前生命周期中做一些插件的实例化new Swiper('')
操作真实DOM的方式
ref="h2" this.refs.h2
ref={(el)=>{this.dom = el}} this.dom
5、 componentWillReceiveProps
1、当this.props发生改变的时候当前函数就会执行
2、当前函数中会有一个参数 这个参数是一个新的props
3、在当前生命周期函数中我们可以对新的props做修改
注意：当前生命周期函数在17.0中废除掉了
6、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
shouldComponentUpdate(newProps,newState) {
console.log("shouldComponentUpdate")
// if(this.state.message == newState.message){
// return false;
// }else{
// return true;
// }
return true;
}
6、当期生命周期决定的是render函数是否执行，而不是数据是否修改
7、 componentWillUpdate
更新前：
1、在当前生命周期中我们可以对更新的数据做最后的修改
2、当前生命周期中有2个参数 一个是新的props一个是新的state
8、 componentDidUpdate:
更新后
1、当前生命周期中我们可以获取到数据更新后最新的DOM结构
2、注意当前生命周期会执行多次，所以当你需要做业务逻辑操作的时候一定要判断
9、 componentWillUnmount:
卸载
1、当前生命周期执行的时候我们需要做事件的解绑
2、数据的移除等操作
网友评论