什么是生命周期函数?
如果想要弄懂react的生命周期,先要了解react的生命周期函数.那么什么是生命周期函数呢?
生命周期函数指在某一时刻组件会自动调用执行的函数
react生命周期的主要构成
1.初始化Initialization (设置props和state setup props and state)
constructor
constructor(){
super()
//当组件的props或者state发生改变的时候就会触发render函数,重新渲染页面
this.state={
list:[]
}
}
2.挂载Mounting
componentWillMount (组件将要挂载时)
一般就如字面的意思,在该组件将要被挂载的时候执行该函数,比如可以加个Loading设置为true来控制一个加载动画,等页面渲染完,请求完之后在设置loading的布尔值为false
render(渲染)
render是第一次挂载该组件会执行一次,还有就是父组件state发生改变会触发父组件的redner从而触发子组件的render函数(总而言之,state或者props发生改变,只要不在shouldComponetMount里面返回return false那么该render函数就会执行,页面就会重新渲染一次)
componentDidmount(组件已经挂载时)
该生命周期函数一般用来发送请求,不会有其他什么问题,如果写在componetWillMount里面可能会和一些其他高级的技术栈发生一些冲突,出现一些问题,请求也可以写在constructor里面,但是目前一般都是写在componentDidmount里面,我用到目前为止是没出现过其他什么问题,所以建议写在componentDidMount里面
3.更新Updation
componentWillReceiveProps(将要获取到props时 父组件跟新状态调用render函数子组件才会有该生命周期函数)
一般这个适用于子组件,第一次父组件渲染的时候不会执行该函数,在当父组件第二次render的时候,就会执行该函数
shouldComponetUpdate
一般是组件跟新之前执行该函数,需要返回一个布尔值(true or false)来确定该次更新是否执行
应用的场景有
shouldComponetUpdate(nextProps,nextState){
/*如果传入的将要跟新的props和state和之前一致,可以不需要进行跟新渲染, 优化性能(虽然diff算法的同层比对已经提升了很多性能,跟它比算不上什么,
但是做这一步是还可以做到性能优化的)contenxt是传入的值 */
if(nextProps.context ==this.props.context ||{...nextState} =={...this.state}){
return false
}else{
return ture
}
componentWillUpdate
如果shouldComponentUpdate函数返回的是个true,就会执行该函数,如果返回的是false,就不会执行该函数,该函数在组件将要被更新前执行,在shouldComponentUpdate函数后执行
render
渲染,render函数在组建里面必须写,因为在定义react组件时继承了component组件,而component组件里面默认执行了其他的生命周期函数,所以其他生命周期函数都可以不写,但是render一定要写(不写要报错 -_-)
componentDidUpdate
当组件完成跟新之后执行,一般来说就是修改了状态,重新渲染之后会执行该函数
3.卸载移除Unmounting
componentWillUnmount
组件将要销毁,卸载的时候调用此函数,一般就是页面上有删除操作的时候,如table里面,删除一行,或者控制组件显隐的时候
