RN生命週期

概述

在Android開發中,每個View都有它自己的一個生命週期。同樣在React Native中組件也有它自己的一個生命週期。（我們可以這樣認爲Android中的View跟React Native組件類似）。下面我們看下React Native的生命週期是怎樣的。

如下：

我們也可以理解成三個階段：

• 創建階段：也就是生命週期中的getInitalState到componetDidMout這個階段，在這階段完成的組件的加載和一些數值的初始化。

• 刷新階段：也就是第一個圖中左下角虛線框內的生命週期，這個階段是組件運行和交互階段，通過改變屬性(props)或者狀態(state)來處理組件界面的交互和刷新。

• 銷燬階段：也就是生命週期中componetWillUnmpunt這個階段，這個階段是組件被銷燬。

理解完上面生命週期執行順序後，我們嘗試寫一個組件,並把每個生命週期並打印出來。

這裏我做了個這樣的操作初始化顯示一個Text組件，然後按下去改變state中的一個值。

生命週期

getDefaultProps

在這個函數中，會去初始化一些默認的屬性，一般都會把固定的內容放在這個過程中，並且全局只調用一次，屬性內容無法再次修改。通過 this.props.屬性 來獲取屬性值

在ES5中初始化屬性是這樣調用的

getDefaultProps() {
    return{
        ...
    }
}

在ES6中可以這樣去寫

//第一種
組件名稱.defaultProps = {
    ...
}
//第二種
static defaultProps = {
    ...
}

getInitialState

在這裏是對一些狀態(State)進行初始化，跟getDefaultProps不同的是，state中的內容是可以修改的，可以通過 this.state.狀態 來獲取狀態值，並且通過 this.setState 來修改狀態值。如下

function(){
    this.setState({
        //狀態：狀態值
        ...
    });
}

注意

在ES5語法中是這樣寫getInitialState。

getInitialState(){
    return{
        ...
    };
}

在ES6中

state = {
    ...
}

當我們調用了this.setState,就是刷新組件的時候。

componentWillMount

在加載組件(render)前，回調用的一個生命週期函數。

render

這個方法就像Android中Activity中的onCreate方法，在這去加載佈局。
注意的一個地方就是，return裏面編寫的是一個xml，並且只能有一個頂級元素
使用如下：

//正確寫法
render() {
    return (
      <View style={styles.container}>
      </View>
    );
}
//錯誤寫法
render() {
    return (
      <View style={styles.container}>
      </View>

      <View style={styles.container}>
      </View>
    );
}

componentDidMount

這個方法在render執行之後調用，一般會將網絡請求、設置延時或者定時等操作，放在這裏進行。

componentWillReceiveProps

這個方法是父元素修改組件屬性(props)時，會調用的方法。

shouldComponentUpdate

在這方法是在調用this.setState或者父元素修改組件props時調用的方法，可以返回false或true來控制是否往下執行，如果返回false就不會刷新組件。

componentWillUpdate

這個方法類似componentWillMount，組件刷新前調用。執行完調用render刷新組件。

componentDidUpdate

組件刷新完成調用的方法。

componentWillUnmount

組件銷燬時調用