react-native的組件生命周期

組件的相關(guān)方法

render

每個組件必須提供render方法妈拌。說該函數(shù)不修改組件的 state庆聘，你也可以返回 null 或者 false 來表明不需要渲染任何東西

• 不要在render()函數(shù)中做復(fù)雜的操作铜犬，更不要進(jìn)行網(wǎng)絡(luò)請求匣掸，數(shù)據(jù)庫讀寫霸琴，I/O等操作播聪。

getInitialState

初始化組件狀態(tài)朽基，在組件掛載之前調(diào)用一次。返回值將會作為 this.state的初始值离陶。

getDefaultProps

該方法在任何實(shí)例創(chuàng)建之前調(diào)用稼虎，因此不能依賴于 this.props。另外招刨，getDefaultProps() 返回的任何復(fù)雜對象將會在實(shí)例間共享霎俩，而不是每個實(shí)例擁有一份拷貝。

PropTypes

propTypes 對象用于驗(yàn)證傳入到組件的 props沉眶，為類型檢查

statics

statics 對象允許你定義靜態(tài)的方法打却，這些靜態(tài)的方法可以在組件類上調(diào)用

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});
MyComponent.customMethod('bar');  // true

在這個塊兒里面定義的方法都是靜態(tài)的，你可以通過ClassName.funcationName的形式調(diào)用它谎倔。
這些方法不能獲取組件的 props 和 state柳击。如果你想在靜態(tài)方法中檢查 props 的值，在調(diào)用處把 props 作為參數(shù)傳入到靜態(tài)方法片习。

isMounted

boolean isMounted()捌肴，當(dāng)組件被渲染到DOM蹬叭，該方法返回true，否則返回false状知。該方法通常用于異步任務(wù)完成后修改state前的檢查秽五，以避免修改一個沒有被渲染的組件的state。
但是不推薦這種方式试幽，等下講完周期后我們再來看這個問題

當(dāng)componentDidMount被調(diào)用時該變量為true筝蚕，當(dāng) componentWillUnmount被調(diào)用時，該變量為false铺坞，這樣該變量就可以當(dāng)isMounted()來使用起宽。但還不夠，到目前為止济榨，我們只是通過變量來替代isMounted()坯沪，還沒有做任何的優(yōu)化，接下來我們需要在componentWillUnmount被調(diào)用時取消所有的異步回調(diào)擒滑，主動釋放所有資源腐晾，這樣就能避免被卸載的組件還持有資源的引用的情況，從而減少了內(nèi)存溢出等情況的發(fā)生丐一。

組件的生命周期

分成三個狀態(tài)：

• Mounting：已插入真實(shí) DOM
• Updating：正在被重新渲染
• Unmounting：已移出真實(shí) DOM
  [站外圖片上傳中...(image-e2f3a-1522160563385)]

componentWillMount

初始化了狀態(tài)之后藻糖，在第一次繪制 render() 之前

componentDidMount

組件第一次繪制之后，會調(diào)用 componentDidMount()库车，通知組件已經(jīng)加載完成
這個函數(shù)調(diào)用的時候巨柒，其虛擬 DOM 已經(jīng)構(gòu)建完成，你可以在這個函數(shù)開始獲取其中的元素或者子組件了

componentWillReceiveProps

如果組件收到新的屬性（props）柠衍，就會調(diào)用 componentWillReceiveProps()

void componentWillReceiveProps(  
  object nextProps
)

輸入?yún)?shù) nextProps 是即將被設(shè)置的屬性洋满，舊的屬性還是可以通過 this.props 來獲取。在這個回調(diào)函數(shù)里面珍坊，你可以根據(jù)屬性的變化牺勾，通過調(diào)用 this.setState() 來更新你的組件狀態(tài)，這里調(diào)用更新狀態(tài)是安全的阵漏，并不會觸發(fā)額外的 render() 調(diào)用

shouldComponentUpdate

當(dāng)組件接收到新的屬性和狀態(tài)改變的話驻民，都會觸發(fā)調(diào)用 shouldComponentUpdate

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

輸入?yún)?shù) nextProps 和上面的 componentWillReceiveProps 函數(shù)一樣，nextState 表示組件即將更新的狀態(tài)值履怯。這個函數(shù)的返回值決定是否需要更新組件回还，如果 true 表示需要更新，繼續(xù)走后面的更新流程虑乖。否者懦趋，則不更新，直接進(jìn)入等待狀態(tài)疹味。通過檢查變化前后屬性和狀態(tài)仅叫，來決定 UI 是否需要更新帜篇，能有效提高應(yīng)用性能

componentWillUpdate

如果組件狀態(tài)或者屬性改變，并且上面的 shouldComponentUpdate(...) 返回為 true诫咱，就會開始準(zhǔn)更新組件笙隙，并調(diào)用 componentWillUpdate()

void componentWillUpdate(  
  object nextProps, object nextState
)

在這個回調(diào)中，可以做一些在更新界面之前要做的事情坎缭。需要特別注意的是竟痰，在這個函數(shù)里面，你就不能使用 this.setState 來修改狀態(tài)掏呼。這個函數(shù)調(diào)用之后坏快，就會把 nextProps 和 nextState 分別設(shè)置到 this.props 和 this.state 中。緊接著這個函數(shù)憎夷，就會調(diào)用 render() 來更新界面了

componentDidUpdate

調(diào)用了 render() 更新完成界面之后莽鸿，會調(diào)用 componentDidUpdate() 來得到通知

void componentDidUpdate(  
  object prevProps, object prevState
)

因?yàn)榈竭@里已經(jīng)完成了屬性和狀態(tài)的更新了，此函數(shù)的輸入?yún)?shù)變成了 prevProps 和 prevState拾给。

componentWillUnmount

當(dāng)組件要被從界面上移除的時候祥得，就會調(diào)用 componentWillUnmount()〗茫可以做一些組件相關(guān)的清理工作级及，例如取消計時器、網(wǎng)絡(luò)請求等

export default class LifeCycleComponent extends Component {

    constructor(props) {
        super(props);
        console.log(" --- LifeCycleComponent --- 構(gòu)造函數(shù) ")
        this.state={
            count:0,
        }
    }

    componentWillMount() {
        console.log(" --- LifeCycleComponent --- componentWillMount 只調(diào)用一次额衙，在初始化渲染執(zhí)行之前立刻調(diào)用 ")
    }

    componentDidMount() {
        console.log(" --- LifeCycleComponent --- componentDidMount 在初始化渲染執(zhí)行之后立刻調(diào)用一次 ")
    }

    componentWillReceiveProps(nextProps) {
        console.log(" --- LifeCycleComponent --- componentWillReceiveProps 初始化后 在組件接收到新的 props 的時候調(diào)用 ")
    }

    //該方法在初始化渲染的時候不會調(diào)用饮焦，在使用 forceUpdate 方法的時候也不會。如果確定新的 props 和 state 不會導(dǎo)致組件更新入偷，則此處應(yīng)該 返回 false
    shouldComponentUpdate(nextProps, nextState) {
        console.log(" --- LifeCycleComponent --- shouldComponentUpdate 在接收到新的 props 或者 state追驴，將要渲染之前調(diào)用 ")
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
        console.log(" --- LifeCycleComponent --- componentWillUpdate 在接收到新的 props 或者 state 之前立刻調(diào)用 ")
    }

    componentDidUpdate(prevProps, prevState) {
        console.log(" --- LifeCycleComponent ---  componentDidUpdate 在組件的更新已經(jīng)同步到 DOM 中之后立刻被調(diào)用 ")
    }

    componentWillUnmount() {
        console.log(" --- LifeCycleComponent --- componentWillUnmount 在組件從 DOM 中移除的時候立刻被調(diào)用")
    }

    render() {
        console.log(" --- LifeCycleComponent --- render")
        return <View>
            <Text
                style={{fontSize:40,backgroundColor:'red'}}
                onPress={() => this.dotask()}>
                揍你</Text>
            <Text  style={{fontSize:40,backgroundColor:'yellow'}}>被打了{(lán)this.state.count}次</Text>
        </View>;
    }

    dotask(){
        this.setState({
            count:this.state.count+1,
        });
        CustomToast.show('揍你'+this.state.count+'次',CustomToast.SHORT);
    }
}