react組件的生命周期,分為三個(gè)過程:
1烛亦,裝載過程(mount)诈泼,也就是把組件第一次在DOM中渲染的過程,
2煤禽,更新過程(update)铐达,當(dāng)組件被重新渲染的過程,
3檬果,卸載過程(unMount)娶桦,組件從DOM中刪除的過程。
三種不同的過程汁汗,React庫會(huì)依次調(diào)用組件的一些成員函數(shù)衷畦,這些函數(shù)稱為生命周期函數(shù)。所以要定制一個(gè)React組件知牌,實(shí)際就是定制這些生命周期函數(shù)祈争。
裝載過程,當(dāng)組件第一次被渲染的時(shí)候角寸,依次調(diào)用的函數(shù)如下:
constructor,getInitialState,getDEfaultProps,componentWillMount,render,componentDidMount
優(yōu)化:在render函數(shù)中調(diào)用this.setState毫無疑問是錯(cuò)誤的菩混,因?yàn)橐粋€(gè)純函數(shù)不應(yīng)該引起狀態(tài)的改變忿墅。
裝載過程:
componentWillMount和componentDidMount這對(duì)兄弟函數(shù)還有一個(gè)區(qū)別,就是coponentWillMount可以在服務(wù)器端被調(diào)用沮峡,也可以在瀏覽器端被調(diào)用疚脐。而componentDidMount只能在瀏覽器端被調(diào)用,在服務(wù)器端使用React的時(shí)候不會(huì)被調(diào)用邢疙。
更新過程:
更新過程會(huì)依次調(diào)用下面的生命周期函數(shù)棍弄,其中render函數(shù)和裝載過程一樣,沒有差別疟游。
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
1,componentWillReceiveProps呼畸,只要是父組件的render函數(shù)被調(diào)用,在render函數(shù)里面被渲染的子組件就會(huì)經(jīng)歷更新過程颁虐,不管父組件傳給自組件的props有沒有改變蛮原,都會(huì)觸發(fā)子組件的componentWillReceiveProps函數(shù)。
通過this.setState方法觸發(fā)的更新過程不會(huì)調(diào)用這個(gè)函數(shù)另绩,這是因?yàn)檫@個(gè)函數(shù)適合根據(jù)新的props值來計(jì)算出是不是要更新內(nèi)部狀態(tài)state儒陨。