天天看點

React元件生命周期一.定義二.總體展示三.詳細說明四.注意點

一.定義

生命周期函數指在某一時刻元件會自動調用執行的函數。

二.總體展示

React元件生命周期一.定義二.總體展示三.詳細說明四.注意點

三.詳細說明

1.挂載階段(Mount):也就是把元件第一次在DOM樹中渲染的過程。會依次調用如下函數:

React元件生命周期一.定義二.總體展示三.詳細說明四.注意點

constructor

元件類的構造函數,主要用途,初始化state和綁定成員函數的this環境。

render

元件的渲染函數,它是一個純函數,完全根據this.state和this.props來決定傳回的結果。render函數并不做實際的渲染動作,它隻是傳回一個JSX描述的結構,最終由react來操作渲染過程。并且,一個元件一定要實作render函數的定義,因為它的父類React.Component類對除render之外的生命周期函數都有預設實作。

componentWillMount和componentDidMount

這兩個生命周期函數分别在render的前後調用,但是注意,render函數調用完成之後,componentDidMount函數并不會被立刻調用。需要等render函數傳回的JSX渲染之後,元件真正的被裝載到DOM樹上,componentDidMount才會調用。

這兩個函數還有一個很重要的差別,componentWillMount可以在伺服器端被調用,也可以在浏覽器端被調用。但是componentDidMount隻能在浏覽器端被調用。是以這個函數中是發起ajax請求擷取資料的絕佳位置。

2.更新階段(Update):元件被重新渲染的過程。

當props或者state被修改的時候,就會引發元件的更新過程。

React元件生命周期一.定義二.總體展示三.詳細說明四.注意點

componentWillReceiveProps(nextProps)

調用方式:

(1)父元件傳遞的props發生改變。

(2)父元件的render函數被調用,在render函數裡面被渲染的子元件就會經曆更新過程,不管父元件傳給子元件的props有沒有改變,都會觸發子元件的componentWillReceiveProps函數。

shouldComponentUpdate(nextProps, nextState)

這個函數可以譯為:元件需要被更新嗎?通常通過定制這個函數的實作方式,提高React元件的性能。

值得一提的是,通過this.setState函數引發的更新過程,并不是立刻更新元件的state值,在執行到shouldComponentUpdate函數的時候,this.state依然是this.setState函數執行之前的指。

3.解除安裝階段(Unmount)

當React元件要從DOM樹上删除掉之前,對應的componentWillUnmount函數就會被調用,是以這個函數适合做一些清理性的工作。

四.注意點

生命周期函數是針對元件而言的,也就是說每一個元件都可以有這麼多的生命周期函數。