乙個 react native 元件從它被 react native 框架載入，到最終被 react native 框架解除安裝，會經歷乙個完整的生命週期。在這個生命週期中，我們可以定義一些生命週期函式，用來處理在特定條件下 react native 元件將要執行的操作。
rn元件的生命週期主要分為3個部分:
1.裝載元件
constructor： 建構函式，這裡主要對元件的一些狀態進行初始化。
componentwillmount： 準備載入元件，可以在這裡做一些業務初始化操作，或者設定元件狀態。
render： 生成頁面需要的 dom 結構，並返回該結構。
componentdidmount：元件載入成功並被成功渲染出來後執行。一般會將網路請求等載入資料的操作放在這裡進行。
2.更新元件
omponentwillreceiveprops：當元件接收到新的 props 時，會觸發該函式。在該函式中，通常可以呼叫 this.setstate 方法來完成對 state 的修改。
shouldcomponentupdate：該方法用來攔截新的 props 或 state，然後根據事先設定好的判斷邏輯，做出最後要不要更新元件的決定。
componentwillupdate：當上面的方法攔截返回 true 的時候，就可以在該方法中做一些更新之前的操作。
render：根據一系列的 diff 演算法，生成需要更新的虛擬 dom 資料。（注意：在 render 中最好只做資料和模板的組合，不應進行 state 等邏輯的修改，這樣元件結構會更加清晰）
componentdidupdate：該方法在元件的更新已經同步到 dom 中去後觸發，我們常在該方法中做 dom 操作。
呼叫次數：
constructor 建構函式,初始化需要state 1次
componentwillmount 控制項渲染前觸發 1次
render 渲染控制項的方法 多次
componentdidmount 控制項渲染後觸發 1次
componentwillreceiveprops 元件接收到新的props被呼叫 多次
shouldcomponentupdate 元件接收到新的props或state時呼叫 多次
componentwillupdate 元件接收到新的props或state時呼叫, 多次
shouldcomponentupdate返回為true時呼叫 多次
componentdidupdate 元件更新後呼叫 多次
componentwillunmount 解除安裝元件呼叫 1次
小栗子:
import react, from 'react';
import from 'react-native';
//震動 選debug
export default class mylifecircle extends component ;
} componentwillmount()
//元件接收到新的props時觸發
componentwillreceiveprops(nextprops)
shouldcomponentupdate(nextprops, nextstate)
render()
);} //元件載入成功並渲染出來
componentdidmount()
//元件重新渲染前會呼叫
componentwillupdate(nextprops, nextstate)
//元件重新渲染後會呼叫
componentdidupdate(preprops, nextstate)
//元件被解除安裝前會呼叫
componentwillunmount()
}const styles = stylesheet.create(,
info: ,
});
log constructor :[object object]
log componentwillmount
log render
log componentdidmount
React Native 元件集合
1 display 該屬性用來指定元素是否為伸縮容器 flex inline flex flex用於產生塊級伸縮容器 inline flex用於產生行級伸縮容器 2 flexdirection 該屬性指定主軸方向 row row reverse column column reverse row 預...
ReactNative元件匯出
如果對rn開發有一定的了解的話，就會發現，reactnative提供的元件不能完全滿足開發的需求，就需要自定義一些元件，那麼如何匯出全域性的自定義元件呢？元件匯出有兩種形式 開發者一般使用預設元件匯出 首先在專案下面新建乙個資料夾rn design rn design就是乙個自己的元件庫類似於rea...
react native引導畫面元件
rn viewpager ios android react native material design android import from rn viewpager 引入必要依賴元件，其餘元件自行引入 style 必須flex 1 style 自定義右側頭部按鈕 style style 跳過...