React Native 生命週期

ZY_FlyWay發表於2017-08-17
React Native

前言：

         在物件導向程式設計中，任何物件的存在都會存在生命週期。類似我們iOS 的View，就會有LoadView，ViewWillAppear，ViewDidLoad等等生命週期。RN也不例外，這篇主要學習RN的生命週期，在開發中如果掌握了並熟練的運用生命週期函式的話，往往開發能事半功倍。

React Native生命週期簡介





如圖，可以把元件生命週期大致分為三個階段：

  • 第一階段：是元件第一次繪製階段，如圖中的上面虛線框內，在這裡完成了元件的載入和初始化；
  • 第二階段：是元件在執行和互動階段，如圖中左下角虛線框，這個階段元件可以處理使用者互動，或者接收事件更新介面；
  • 第三階段：是元件解除安裝消亡的階段，如圖中右下角的虛線框中，這裡做一些元件的清理工作。

生命週期回撥函式（ES5寫法）

下面來詳細介紹生命週期中的各回撥函式，先說下和上圖對應的ES5寫法。

getDefaultProps

在元件建立之前，會先呼叫 getDefaultProps()，這是全域性呼叫一次，嚴格地來說，這不是元件的生命週期的一部分。在元件被建立並載入候，首先呼叫 getInitialState()，來初始化元件的狀態。

componentWillMount

然後，準備載入元件，會呼叫 componentWillMount()，其原型如下：

void componentWillMount()

這個函式呼叫時機是在元件建立，並初始化了狀態之後，在第一次繪製 render() 之前。可以在這裡做一些業務初始化操作，也可以設定元件狀態。這個函式在整個生命週期中只被呼叫一次。

componentDidMount

在元件第一次繪製之後，會呼叫 componentDidMount()，通知元件已經載入完成。函式原型如下：

void componentDidMount()

這個函式呼叫的時候，其虛擬 DOM 已經構建完成，你可以在這個函式開始獲取其中的元素或者子元件了。需要注意的是，RN 框架是先呼叫子元件的 componentDidMount()，然後呼叫父元件的函式。從這個函式開始，就可以和 JS 其他框架互動了，例如設定計時 setTimeout 或者 setInterval，或者發起網路請求。這個函式也是隻被呼叫一次。這個函式之後，就進入了穩定執行狀態，等待事件觸發。

componentWillReceiveProps

如果元件收到新的屬性（props），就會呼叫 componentWillReceiveProps()，其原型如下：

void componentWillReceiveProps(  
  object nextProps
)

輸入引數 nextProps 是即將被設定的屬性，舊的屬性還是可以通過 this.props 來獲取。在這個回撥函式裡面，你可以根據屬性的變化，通過呼叫 this.setState() 來更新你的元件狀態，這裡呼叫更新狀態是安全的，並不會觸發額外的 render() 呼叫。如下：

componentWillReceiveProps: function(nextProps) {  
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

shouldComponentUpdate

當元件接收到新的屬性和狀態改變的話，都會觸發呼叫 shouldComponentUpdate(...)，函式原型如下：

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

輸入引數 nextProps 和上面的 componentWillReceiveProps 函式一樣，nextState 表示元件即將更新的狀態值。這個函式的返回值決定是否需要更新元件，如果 true 表示需要更新，繼續走後面的更新流程。否者，則不更新，直接進入等待狀態。

預設情況下，這個函式永遠返回 true 用來保證資料變化的時候 UI 能夠同步更新。在大型專案中，你可以自己過載這個函式，通過檢查變化前後屬性和狀態，來決定 UI 是否需要更新，能有效提高應用效能。

componentWillUpdate

如果元件狀態或者屬性改變，並且上面的 shouldComponentUpdate(...) 返回為 true，就會開始準更新元件，並呼叫 componentWillUpdate()，其函式原型如下：

void componentWillUpdate(  
  object nextProps, object nextState
)

輸入引數與 shouldComponentUpdate 一樣，在這個回撥中，可以做一些在更新介面之前要做的事情。需要特別注意的是，在這個函式裡面，你就不能使用 this.setState 來修改狀態。這個函式呼叫之後，就會把 nextProps 和 nextState 分別設定到 this.props和 this.state 中。緊接著這個函式，就會呼叫 render() 來更新介面了。

componentDidUpdate

呼叫了 render() 更新完成介面之後，會呼叫 componentDidUpdate() 來得到通知，其函式原型如下：

void componentDidUpdate(  
  object prevProps, object prevState
)

因為到這裡已經完成了屬性和狀態的更新了，此函式的輸入引數變成了 prevProps 和 prevState。

componentWillUnmount

當元件要被從介面上移除的時候，就會呼叫 componentWillUnmount()，其函式原型如下：

void componentWillUnmount()

在這個函式中，可以做一些元件相關的清理工作，例如取消計時器、網路請求等。


生命週期回撥函式學習筆記小例（ES6）


學習就要與時俱進，試著接受和學習新東西，下面的例子都是用ES6寫的。


1、設定預設屬性


程式碼：

 class RNHybrid extends Component {
  
  render() {  
      return(  
        <View style={styles.container}> 
          <Text style={{padding:10, fontSize:42}}>
                {this.props.name}
          </Text>
        </View>  
      );  
   }
}


RNHybrid.defaultProps = {
  name: 'Mary',
};


效果：





ES5和ES6寫法對比:

ES6

class Greeting extends React.Component {
  // ...
}

Greeting.defaultProps = {
  name: 'Mary'
};


ES5

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },

  // ...

});


總結：
          props相當於iOS 裡的屬性，但是這個屬性只是readonly。我們可以通過this.props來讀取屬性。


2、設定狀態


   由圖片我們知道，當我們修改狀態的時候，會從新呼叫render函式重新渲染頁面，所以一些和介面有關的動態變數需要設定成狀態。

   如上一篇的例子，我在從新copy一遍：

看下效果：





程式碼：（生命週期現在還沒有說我也是偏面的瞭解，以後會系統的學習，現在先不介紹）

[javascript] view plain copy
  1. constructor(props) {  
  2.         super(props);  
  3.         //設定當前狀態是text  初始值為空  
  4.         this.state = {text: ''};  
  5.     }  
  6.   
  7.   render() {    
  8.       return(    
  9.         <View style={styles.container}>   
  10.           <TextInput style={styles.TextInputStyles}   
  11.               onChangeText={(Text)=>{  
  12.                 this.setState({text:Text});  
  13.               }}  
  14.           />   
  15.           <Text style={{padding:10, fontSize:42}}>  
  16.                 {this.state.text}  
  17.           </Text>  
  18.         </View>    
  19.       );    
  20.    }  

ES5和ES6寫法對比:

ES6 

class myClass extends React.Component {
  constructor(props) {
    super(props);    this.state = {text:''};
  }
  // ...
}


ES5

var myClass = createReactClass({
  getInitialState: function() {
    return {text: ''};
  },
  // ...
});


ES5和ES6還有一個不同的地方，如果呼叫事件函式需要bind繫結

例如：

class RNHybrid extends Component {
  

  constructor(props) {
        super(props);
        this.state = {age:this.props.age};
    }

 handleClick() {
    alert(this.state.age);
  }

  render() {  
      return(  
        <View style={styles.container}> 
          <Text style={{padding:10, fontSize:42}} onPress={this.handleClick}>
                {this.props.name}
          </Text>
        </View>  
      );  
   }
}

這樣寫你點選的時候將會報錯：



你需要將函式繫結：

1.可以在建構函式裡繫結

 constructor(props) {
        super(props);
        this.state = {age:this.props.age};
        this.handleClick = this.handleClick.bind(this);
    }

2.還可以在呼叫的時候繫結

 <Text style={{padding:10, fontSize:42}} onPress={this.handleClick.bind(this)}>
                {this.props.name}
 </Text>


3、其他生命週期函式驗證


程式碼：

import React, { Component } from 'react';
import {
   AppRegistry,
  StyleSheet,
  View,
  Text,
  TextInput,
} from 'react-native';

var  nowTime = new Date();
var  showText;

class RNHybrid extends Component {
  
  constructor(props) {  
        super(props);  
        console.log('state:'+nowTime);
        showText = 'state:'+nowTime+'\r\r';   
        //設定當前狀態是text  初始值為空  
        this.state = {text: ''};  
  }


  componentWillMount(){
    console.log('componentWillMount:'+nowTime);
    showText = showText+'componentWillMount:'+nowTime+'\r\r';   
  } 

  componentDidMount(){
    console.log('componentDidMount:'+nowTime);
    showText = showText+'componentDidMount:'+nowTime+'\r\r';   
    alert(showText);
  } 

  shouldComponentUpdate(){
    console.log('shouldComponentUpdate:'+nowTime);
    showText = showText+'shouldComponentUpdate:'+nowTime+'\r\r';   
    return true;
  } 
   
  componentWillUpdate(){
    console.log('componentWillUpdate:'+nowTime);
    showText = showText+'componentWillUpdate:'+nowTime+'\r\r';       
  } 

  componentDidUpdate(){
    console.log('componentDidUpdate:'+nowTime);
    showText = showText+'componentDidUpdate:'+nowTime+'\r\r';       
  } 

  componentWillUnmount(){
    console.log('componentWillUnmount:'+nowTime);
    showText = showText+'componentWillUnmount:'+nowTime+'\r\r';       
  }

  render() {    
      return(    
        <View style={styles.container}>   
          <TextInput style={styles.TextInputStyles}   
              onChangeText={(Text)=>{  
                this.setState({text:Text});  
              }}  
          />   
          <Text style={{marginTop:10,padding:10, fontSize:15,borderColor:'gray',borderWidth:1}}>  
                {showText}  
          </Text>  
        </View>    
      );    
   }  
}

RNHybrid.defaultProps = {
  name: 'Mary',
  age:'18',
};


const styles = StyleSheet.create({
   container:{
   		marginTop:100,
   		flexDirection:'row',
      flexWrap:'wrap',
      justifyContent:'space-around',
   },
   TextInputStyles:{
      width:200,
      height:60,
      borderWidth:2,
      borderColor:'red',
   },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);


效果：




分析：

    當載入時候，按照 建構函式-> componentWillMount -> render->componentDidMount 這個順序來的。
     細心的人可能會發現，介面上並沒有顯示componentDidMount，是因為執行了這個函式並沒有重新render。
    當你輸入的時候改變state就按照圖上左下角部分進行。重新render的時候，就會看到componentDidMount出現。

    驗證圖上的分析是合理的，我們也放心了。

相關文章