1. 程式人生 > >react生命週期整理

react生命週期整理

react中的生命週期可以分為四大類,分別為定義時觸發,渲染時觸發,更新時觸發以及解除安裝時觸發。本文章會對所有生命週期進行歸納並從原始碼的角度解析其實現原理(寫到一半發現文章已經有點長了,決定新開一片文章來解析實現原理)

定義時觸發(createClass)

getDefaultProps

該生命週期是在定義元件的時候觸發,其返回的物件可以用於設定預設的 props,由於這個方法是在建構函式中執行的,所以這個方法在整個生命週期中只會觸發一次

 

渲染時觸發(MOUNTING)

getInitialState

此方法在每次元件例項化的時候都會執行,其返回值用於設定當前元件例項的預設state,在此方法中可以訪問到當前例項的props

componentWillMount

該方法會在元件首次渲染之前呼叫,即render方法之前

render

render方法用於返回一個虛擬的元件物件,也就是虛擬dom,該方法在每個元件中都必須顯式實現,並且返回一個物件,用於渲染出真實的dom節點

componentDidMount

這個方法是首次渲染完成後回撥的一個方法,該方法被呼叫時,表示元件已經渲染完成,此時真實的 DOM也已經被渲染出來,一般用於初始化的一步操作都會在這個生命週期中完成

 

更新時觸發(RECEIVE_PROPS)

componentWillReceiveProps(object nextProps, object nextContext)

該方法會在元件props或者context發生改變時觸發,如上所示,該方法包含兩個引數,nextprops和nextContext分別表示新的props和context,網上的很多資料不知道因為比較舊的原因還是其他原因,都少了nextContext這個引數,但根據15.0的原始碼分析和真實的除錯結果,是會有nextContext這個引數的回撥,關於context的相關內容可以參考之前的一片部落格,此處是傳送門

shouldComponentUpdate(object nextProps, object nextState, object nextContext)

該方法在元件的state和props發生改變之後執行,預設返回true,當返回false時,元件不會重新渲染,該方法提供了一個鉤子,讓開發者自行決定是否需要對元件重新渲染,nextProps, nextState, nextContext分別表示新的props,state和context

componentWillUpdate(object nextProps, object nextState, object nextContext)

該函式是在元件接收完新引數,但是尚未渲染完成之前觸發

componentDidUpdate.bind(object prevProps, object prevState, object prevContext)

這個方法會在接收完新的引數,並且重新渲染完成之後呼叫,需要注意的是,這個時候傳入的引數,是更新之前的舊props,state和context,畢竟,這時候props和state等都已經更新完畢,這裡再回傳也就沒什麼必要了

 

解除安裝時觸發(UNMOUNTING)

componentWillUnmount

當React使用完一個元件時,該元件會被從 DOM 中解除安裝後銷燬,此時 componentWillUnmout 會被執行,完成所有的清理和銷燬工作,此處可以做一些清理性的工作,如銷燬定時器、事件等操作