天天看點

react native基礎

react native 的兩個核心的屬性控制改變元件:props和state。

props是在父元件中進行設定,隻要設定完成那麼在元件的生命周期就定死了,不會發生改變。

針對資料變化修改的情況,我們需要使用state屬性;一般情況下,我們需要在constructor方法中初始化state,然後在你想要修改更新的時候調用setstate方法。

方法名

作用

調用次數

constructor

構造函數,初始化需要的state

1次

componentwillmount

控件渲染前觸發

render

渲染控件的方法

多次

componentdidmount

控件渲染後觸發

componentwillreceiveprops

元件接收到新的props時被調用

shouldcompentupdate

當元件接收到props和state時被調用

componentwillupdate

props或者state改變,并且此前的shouldcomponentupdate為true會調用該方法

componentdidupdate

元件重新渲染完成後會調用此方法

componentwillunmount

元件解除安裝和銷毀之前被調用

react native的元件的生命周期:
react native基礎

從圖中可以看出來元件的生命周期有三個階段:

第一個階段:初始化項目後,執行構造器,頁面加載之後,第一次渲染頁面,

第二個階段:是元件的運作中階段: 在這個階段主要點就是:state狀态的改變或者props屬性的改變, 當state發生改變的時候,會調用shouldcomponentupdate()方法, 這個方法是傳回是一個boolean類型,用于判定state狀态是否改變,傳回ture的時候,接下來将會執行componentwillupdate()方法更新元件,然後再一次的執行render()方法,渲染頁面,之後執行componentdidupdate()方法,然後如果還有state狀态發生改變的會就還是這個流程執行; 但 如果props屬性發生改變的時候,就是觸發componentwillreceiveprops()方法,然後在執行shouldcomponentupdate()方法,接下來的流程就一樣了; 這就是運作中執行的流程;

第三個階段:元件的解除安裝,這個期間我現在接觸的比較少,因為react native 對這個階段是自己封裝好的,沒太用過,先了解以下:

元件解除安裝的時候,首先執行unmount()方法,然後執行componentwillunmount()方法然後就是結束了;

在使用這個地方的時候, 有一個示例:就是對于本地存儲的時候,當元件解除安裝的時候,可以在第三個階段對 本地儲存的資料進行清空操作;