react-native入門(三)----組件的生命週期

話很少說，先上一個圖(之前找的圖，相對比較準確)

組件生命週期

調用順序：

1.1 構造函數(constructor)

一、第一個語句必須是super(props)。

二、contructor將在任意一個RN組件被加載以前優先調用，而且只會調用一次。

三、該函數最大的做用是定義該組件當中須要使用的狀態機變量 。

constructor(props) {
    super(props);
    this.myProperty1 = 'test';
    this.myProperty2 = true;
    this.state = {//定義狀態機變量
    inputedNum: '',
    inputedPW: ''
    };
    this.updatePW = this.updatePW.bind(this);
    this.jumpToWaiting = this.jumpToWaiting.bind(this);
}
複製代碼

1.2 componentWillMount

一、該函數原型爲componentWillMount()

二、該函數整個過程當中只執行一次

三、該函數會在初始渲染前執行，即在render被調用以前調用

四、該函數執行後render就會調用。

五、若是在render中改變了某些狀態機變量，那麼RN不會執行渲染，而是等待該函數執行完畢後再次渲染。

六、子組件中一樣擁有該方法，並會在父組件執行完畢後執行，該函數無返回值。

七、該函數適合於須要在本地讀取一些數據用於顯示，那麼在render執行前調用是一個很好的時機。

1.3 render(渲染函數)

一、調用該方法，先對狀態機變量與屬性進行檢查。

二、若是開發者不想渲染界面的話，能夠在此處返回null或者false。

三、該方法適用於進行界面的JSX代碼編寫，所以不適合在此處對狀態機變量進行修改或者訪問服務器。

1.4 componentDidMount

一、該函數會在render渲染完畢以後調用，整個過程只執行一次。

二、該函數執行後，開發者就能夠對界面上的組件或者子組件進行各類操做了。

三、該函數的應用場景適用於在移動端應用啓動以後須要訪問網絡進行某些數據獲取。

截止到此處，一個RN應用基本上啓動運行了，接下來將處在運行中狀態：

1.5 componentWillReceiveProps

一、該函數的原型爲componentWillReceiveProps(nextProps);

二、當props(屬性)發生改變或者接受到新的props時，該函數被調用，並接受一個輸入參數，類型爲Object，存放新的props，原先反生改變的舊的props仍然能夠經過this.props訪問。

三、該函數在RN初次被渲染的時候不會被調用。

四、若是在該函數當中對狀態機變量進行了修改，RN不會當即渲染頁面，而是會等待該方法執行完畢後一塊兒渲染。

1.6 shouldComponentUpdate:（組件是否須要更新）

一、該函數原型 : boolean shouldComponentUpdate(nextProps,nextState);

二、當props(屬性)或者狀態(state)發生改變的時候會觸發該函數，分別對應接收的兩個參數，根據返回的布爾值來決定是否須要對頁面進行從新渲染，若是不進行渲染，那麼該方法後續的componentWillUpdate與componentDidUpdate都不會被執行。

三、該函數默認會返回true。

四、應用場景：能夠在該函數中編寫一些邏輯來判斷渲染類型，來阻值一些沒有必要的從新渲染，達到提高應用運行效率的目的。

1.7 componentWillUpdate

一、該方法原型與上一方法相同，在從新渲染前會調用該方法，爲渲染進行準備工做。

二、該函數無返回值。

三、注意：在該方法中，不該該對狀態機變量進行修改，要改變，也應該在1.1.5當中進行。

1.8 componentDidUpdate

該函數會在從新渲染render以後調用，傳入上個方法必須的兩個參數便可。

1.9 componentWillUnmount:

該方法會在RN卸載以前調用，無參無返回值，在該方法中，須要對該組件當中申請或者訂閱的某些資源與消息進行釋放。 父子組件渲染順序，或者方法執行順序，下面的是介紹，主要看圖一目瞭然😂~

默認渲染流程

先執行父視圖渲染前的操做constructor(), componentWillMount()，至渲染方法render(), 而後會開始初始化子視圖，即執行子視圖的constructor,componentWillMount(),緊接着render,而後，子視圖渲染完畢後，開始執行componentDidMount(),渲染完畢子視圖後渲染父視圖，而後執行父視圖的componentDidMount（）；再有子視圖類推。

(注意：網絡請求不要再willMount中請求，若是界面複雜，可能會在渲染完畢以前回調，推薦在componentDidMount中使用)

狀態發生改變的流程

當屬性發生變化的時候，相似上面，先收到消息componentWillReceiveProps，而後判斷是否渲染shouldComponentUpdate，接着將要渲染componentDidUpdate,而後render，接下來開始準備渲染子視圖，開始收到消息componentWillReceiveProps，而後判斷是否渲染shouldComponentUpdate，接着將要渲染componentDidUpdate,而後render，最後回調子視圖的componentDidUpdate(),再接着父視圖的componentDidUpdate();

父子組件渲染流程：

父組件:componentWillMount->render->componentDidMount

父子組件：componentWillMount(父)->componentWillMount(子)->render->componentDidMount(子)->componentDidMount(父)