React Native 組件生命周期

IOS - ViewController 生命周期

init

loadView

viewDidLoad

viewWillApper

viewWillLayoutSubviews

viewDidLayoutSubviews

viewDidApper

viewWillDisapper

viewDidDisapper

(viewWillUnload->viewDidUnload)

dealloc

React Native 組件生命周期

1.創建階段

getDefaultProps:function(){}

2.實例化階段

getInitialState:function(){}? //獲取this.state的默認值

componentWillMount:function(){}? //render之前調用此方法,業務處理放在此方法中

render:function(){}? ? ? ? //渲染返回一個虛擬DOM

componentDidMount:function(){}? //該方法發生render方法之后。ReactJS會使用render方法返回的虛擬DOM對象來創建真實DOM結構

3.更新階段

componentWillRecieveProps:función(){}? //該方法發生在this.props被修改或福組件調用setProps()方法之后

shouldComponentUpdate:function(){}? // 是否需要更新

componentWillUpdate:function(){}? //將要更新

componentDidUpdate:function(){}? //更新完畢

4.銷毀階段

componentWillUnmount:function(){}? //銷毀

整個ReactJS 的生命周期中,主要經歷這4個階段


創建階段:

該階段主要發生在創建組件類的時候,即調用React.createClass。這個階段只會觸發一個getDefaultProps方法,該方法返回一個對象,并緩存下來然后與父組件指定的props對象合并,并最后賦值給this.props作為該組件的默認屬性。

實例化階段:

該階段主要發生在組件類被調用的時候。這一階段會觸發一系列的流程。

getInitialState 初始化組件的state的值,返回值會賦值組件的this.state屬性

componentWillMount 根據業務邏輯來對state進行相應的操作

render 根據state的值,生成頁面需要的虛擬DOM結構,并返回該結構。

componentDidMount ?對根據虛擬DOM結構而生成真實DOM進行相應的處理。

更新階段:

該階段發生在用戶操作之后或者父組件有更新的時候,此時會根據用戶的操作行為進行相應的頁面結構的調整。該階段發生的一系列流程如下:

componentWillReceiveProps(object nextProps) 當組件接收到新的props時,會觸發該函數。在該函數中,通常可以調用this.setState方法來完成對state的修改

shouldComponentUpdate(nextProps, nextState) 該方法用來攔截新的props或state。然后根據事先設定好的判斷邏輯,做出要不要更新組件的決定。

componentWillUpdate(object nextProps, object nextState) 當步驟shouldComponentUpdate方法中攔截返回true的時候,就可以在該方法中做一些更新之前的操作。

render 根據diff算法,生成需要更新的虛擬DOM數據。

componentDidUpdate 該方法在組件的更新已經同步到DOM中后觸發

銷毀階段

componentWillUnmount 當組件從DOM中移除的時候,會觸發的方法。我們通常會做一些取消事件綁定、移除虛擬DOM中對應的組件數據結構、銷毀一些無效的定時器等工作。



props: 它是一個對象,是組件用來接受外面傳來的參數。組建內部是不能夠修改自己props屬性。只能通過父組件來修改,上面的getDefaultProps方法便是處理props的默認值。

state: 它是組件的屬性,主要用來存儲組件需要的數據,它是可以改變的。它的每次改變都會引發組件的更新,這是ReactJS中的關鍵點之一。每次數據的更新都是通過修改state屬性的值,然后ReactJS內部會監聽state屬性的變化,一旦反生變化,就會主動觸發組件的render方法來更新DOM結構。




最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容