React 生命周期
創(chuàng)建階段
constructor
模塊創(chuàng)建
構(gòu)造函數(shù)无蜂,組件被創(chuàng)建時(shí)調(diào)用一次危队,有且只調(diào)用一次,為默認(rèn)state賦初始值。
componentWillMount
模塊創(chuàng)建階段渲染前
組件即將被渲染的時(shí)候調(diào)用送挑,render()函數(shù)之前調(diào)用,有且只調(diào)用一次,在組件渲染之前進(jìn)行的操作:操作默認(rèn)state
componentWillMount(){
console.log("組建即將被渲染");
console.log(this.state);
//對(duì)默認(rèn)state進(jìn)行處理
}
componentDidMount
模塊創(chuàng)建階段最后一步
組件已經(jīng)被渲染之后調(diào)用暖眼,render()函數(shù)之后惕耕,有且只調(diào)用一次
componentDidMount(){
//render函數(shù)執(zhí)行之后調(diào)用
//發(fā)送請(qǐng)求,請(qǐng)求數(shù)據(jù)
}
render()
組件state發(fā)生變化罢荡,就會(huì)執(zhí)行赡突。
render(){
}
更新階段
componentWillReceiveProps
組件將要接受props時(shí)調(diào)用对扶,多次調(diào)用区赵,只要有數(shù)據(jù)props更新,它就會(huì)被調(diào)用
componentWillReceiveProps(props){
console.log("組件即將接受數(shù)據(jù)");
console.log(props)
//更新當(dāng)前組件的state
this.setState({
image:this.props.image
})
}
shouldComponentUpdate
在接受數(shù)據(jù)函數(shù)調(diào)用之后調(diào)用浪南,用于阻止當(dāng)前組件更新
shouldComponentUpdate(){
console.log("組建被更新之前阻止");
//state驗(yàn)證
//true 不阻止
return false;
}
componentWillUpdate
如果不阻止更新笼才,在render之前調(diào)用
componentWillUpdate(){
console.log("組件即將被更新");
}
componentDidUpdate
更新之后,render渲染結(jié)束調(diào)用
componentDidUpdate(){
console.log("組件被渲染完成之后調(diào)用");
}
銷毀階段
componentWillUnmount()
在組件被卸載和銷毀之前立刻調(diào)用络凿÷馑停可以在該方法里處理任何必要的清理工作,例如解綁定時(shí)器絮记,取消網(wǎng)絡(luò)請(qǐng)求摔踱,清理任何在componentDidMount環(huán)節(jié)創(chuàng)建的DOM元素。