您好,登錄后才能下訂單哦!
react native 的兩個(gè)核心的屬性控制改變組件:props和state。
props是在父組件中進(jìn)行設(shè)置,只要設(shè)置完成那么在組件的生命周期就定死了,不會(huì)發(fā)生改變。
針對(duì)數(shù)據(jù)變化修改的情況,我們需要使用state屬性;一般情況下,我們需要在constructor方法中初始化state,然后在你想要修改更新的時(shí)候調(diào)用setState方法。
方法名 | 作用 | 調(diào)用次數(shù) |
---|---|---|
constructor | 構(gòu)造函數(shù),初始化需要的state | 1次 |
componentWillMount | 控件渲染前觸發(fā) | 1次 |
render | 渲染控件的方法 | 多次 |
componentDidMount | 控件渲染后觸發(fā) | 1次 |
componentWillReceiveProps | 組件接收到新的props時(shí)被調(diào)用 | 多次 |
shouldCompentUpdate | 當(dāng)組件接收到props和state時(shí)被調(diào)用 | 多次 |
componentWillUpdate | props或者state改變,并且此前的shouldComponentUpdate為true會(huì)調(diào)用該方法 | 多次 |
componentDidUpdate | 組件重新渲染完成后會(huì)調(diào)用此方法 | 多次 |
componentWillUnmount | 組件卸載和銷毀之前被調(diào)用 | 1次 |
react native的組件的生命周期:
從圖中可以看出來(lái)組件的生命周期有三個(gè)階段:
第一個(gè)階段:初始化項(xiàng)目后,執(zhí)行構(gòu)造器,頁(yè)面加載之后,第一次渲染頁(yè)面,
第二個(gè)階段:是組件的運(yùn)行中階段: 在這個(gè)階段主要點(diǎn)就是:state狀態(tài)的改變或者props屬性的改變, 當(dāng)state發(fā)生改變的時(shí)候,會(huì)調(diào)用shouldComponentUpdate()方法, 這個(gè)方法是返回是一個(gè)boolean類型,用于判定state狀態(tài)是否改變,返回ture的時(shí)候,接下來(lái)將會(huì)執(zhí)行componentWillUpdate()方法更新組件,然后再一次的執(zhí)行render()方法,渲染頁(yè)面,之后執(zhí)行componentDidUpdate()方法,然后如果還有state狀態(tài)發(fā)生改變的會(huì)就還是這個(gè)流程執(zhí)行; 但 如果props屬性發(fā)生改變的時(shí)候,就是觸發(fā)componentWillReceiveProps()方法,然后在執(zhí)行shouldComponentUpdate()方法,接下來(lái)的流程就一樣了; 這就是運(yùn)行中執(zhí)行的流程;
第三個(gè)階段:組件的卸載,這個(gè)期間我現(xiàn)在接觸的比較少,因?yàn)閞eact native 對(duì)這個(gè)階段是自己封裝好的,沒(méi)太用過(guò),先了解以下:
組件卸載的時(shí)候,首先執(zhí)行Unmount()方法,然后執(zhí)行componentWillUnmount()方法然后就是結(jié)束了;
在使用這個(gè)地方的時(shí)候, 有一個(gè)示例:就是對(duì)于本地存儲(chǔ)的時(shí)候,當(dāng)組件卸載的時(shí)候,可以在第三個(gè)階段對(duì) 本地儲(chǔ)存的數(shù)據(jù)進(jìn)行清空操作;
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。