生命周期
參考:http://wiki.jikexueyuan.com/project/react/component-specs-lifecycle.html
| 生命周期 | API | 說(shuō)明 | 備注 |
|---|---|---|---|
| 掛載 | componentWillMount | 組件初始化渲染之前立刻調(diào)用 | 只調(diào)用一次 |
| 掛載 | componentDidMount | 組件初始化渲染后立刻調(diào)用 | 只調(diào)用一次 |
| 更新 | comcponentWillReceiveProps | 在組件接收到新的props的時(shí)候調(diào)用 |
初始化渲染時(shí)不會(huì)調(diào)用 |
| 更新 | shouldComponentUpdate | 在接收到新的props或者 state，將要渲染之前調(diào)用。 |
初始化渲染時(shí)不會(huì)調(diào)用 |
| 更新 | componentWillUpdate | 在接收到新的props或者state之前立刻調(diào)用 |
初始化渲染時(shí)不會(huì)調(diào)用 |
| 更新 | componentDidUpdate | 在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用 | 初始化渲染時(shí)不會(huì)調(diào)用 |
| 移除 | componentWillUnmount | 在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。 | 在該方法中執(zhí)行任何必要的清理，比如無(wú)效的定時(shí)器 |
componentWillUpdate
當(dāng)組件收到新的props或者state，在render之前會(huì)回調(diào)該函數(shù)。
注意不能在該方法中使用 this.setState()，否則會(huì)導(dǎo)致無(wú)限循環(huán)。如果需要在收到新的prop后更新state，應(yīng)該使用 componentWillReceiveProps 方法，在該方法中使用this.setState()不會(huì)觸發(fā)組件重新渲染。
componentDidUpdate
可以在該方法中使用this.setState()
如果在該方法中使用 this.setState()會(huì)更新該組件，更新組件的同時(shí)又會(huì)觸發(fā)componentDidUpdate從而重復(fù)調(diào)用this.setState()，這會(huì)導(dǎo)致無(wú)限循環(huán)。
正確的做法是加入一個(gè)終止條件，使得在調(diào)用過(guò)程中能正確退出
componentDidUpdate: function() {
if(condition) {
this.setState({..})
} else {
//do something else
}
}
setState方法詳解
-
setState方法是異步的并且為了獲得更好的性能會(huì)進(jìn)行批量更新,進(jìn)行setState()操作后state變化不會(huì)馬上反映到this.state上，所以通過(guò)this.state獲得的可能還是原來(lái)的值。如果想要確保state變化后執(zhí)行某些操作可以使用setState提供的回調(diào)函數(shù)setState({...}, function(){}) -
setState使用異步操作是因?yàn)镴S是單線程語(yǔ)言，而更新state是一種比較昂貴的操作，若進(jìn)行同步操作會(huì)導(dǎo)致瀏覽器卡頓用戶體驗(yàn)變差，因此setState采用異步批量更新。 - 若要確保
state確實(shí)被更新后執(zhí)行某些操作那么應(yīng)該使用setState的回調(diào)函數(shù)
this.setState({...}, function(){
...
})
