React Native 組件生命周期

IOS - ViewController 生命周期

init

loadView

viewDidLoad

viewWillApper

viewWillLayoutSubviews

viewDidLayoutSubviews

viewDidApper

viewWillDisapper

viewDidDisapper

(viewWillUnload->viewDidUnload)

dealloc

React Native 組件生命周期

1.創(chuàng)建階段

getDefaultProps:function(){}

2.實例化階段

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

componentWillMount:function(){}? //render之前調(diào)用此方法,業(yè)務(wù)處理放在此方法中

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

componentDidMount:function(){}? //該方法發(fā)生render方法之后。ReactJS會使用render方法返回的虛擬DOM對象來創(chuàng)建真實DOM結(jié)構(gòu)

3.更新階段

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

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

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

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

4.銷毀階段

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

整個ReactJS 的生命周期中,主要經(jīng)歷這4個階段


創(chuàng)建階段:

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

實例化階段:

該階段主要發(fā)生在組件類被調(diào)用的時候。這一階段會觸發(fā)一系列的流程。

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

componentWillMount 根據(jù)業(yè)務(wù)邏輯來對state進行相應(yīng)的操作

render 根據(jù)state的值,生成頁面需要的虛擬DOM結(jié)構(gòu),并返回該結(jié)構(gòu)。

componentDidMount ?對根據(jù)虛擬DOM結(jié)構(gòu)而生成真實DOM進行相應(yīng)的處理。

更新階段:

該階段發(fā)生在用戶操作之后或者父組件有更新的時候,此時會根據(jù)用戶的操作行為進行相應(yīng)的頁面結(jié)構(gòu)的調(diào)整。該階段發(fā)生的一系列流程如下:

componentWillReceiveProps(object nextProps) 當(dāng)組件接收到新的props時,會觸發(fā)該函數(shù)。在該函數(shù)中,通??梢哉{(diào)用this.setState方法來完成對state的修改

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

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

render 根據(jù)diff算法,生成需要更新的虛擬DOM數(shù)據(jù)。

componentDidUpdate 該方法在組件的更新已經(jīng)同步到DOM中后觸發(fā)

銷毀階段

componentWillUnmount 當(dāng)組件從DOM中移除的時候,會觸發(fā)的方法。我們通常會做一些取消事件綁定、移除虛擬DOM中對應(yīng)的組件數(shù)據(jù)結(jié)構(gòu)、銷毀一些無效的定時器等工作。



props: 它是一個對象,是組件用來接受外面?zhèn)鱽淼膮?shù)。組建內(nèi)部是不能夠修改自己props屬性。只能通過父組件來修改,上面的getDefaultProps方法便是處理props的默認值。

state: 它是組件的屬性,主要用來存儲組件需要的數(shù)據(jù),它是可以改變的。它的每次改變都會引發(fā)組件的更新,這是ReactJS中的關(guān)鍵點之一。每次數(shù)據(jù)的更新都是通過修改state屬性的值,然后ReactJS內(nèi)部會監(jiān)聽state屬性的變化,一旦反生變化,就會主動觸發(fā)組件的render方法來更新DOM結(jié)構(gòu)。




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在React Native中使用組件來封裝界面模塊時,整個界面就是一個大的組件,開發(fā)過程就是不斷優(yōu)化和拆分界面組件...
    ITxiansheng閱讀 986評論 1 2
  • 在React Native中使用組件來封裝界面模塊時,整個界面就是一個大的組件,開發(fā)過程就是不斷優(yōu)化和拆分界面組件...
    朱_源浩閱讀 9,069評論 6 38
  • 轉(zhuǎn)載: https://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid...
    驀然之間的閱讀 467評論 0 1
  • 書于我來說就是鏡子,概是擴于以史為鏡,人生在世總會思考一些直指終極的問題,我是誰?我從哪里來?我要到哪里去?蓋...
    瓶蓋_閱讀 331評論 0 9
  • 天色已晚,秋風(fēng)蕭瑟。 一個五六歲的女孩躺在床上,睜著眼,直直的看著上方,一動不動。 這就是我,百里家的三小姐,百里...
    木子北閱讀 286評論 0 0

友情鏈接更多精彩內(nèi)容