一、如圖，該圖描述了React Native 組件的生命周期。

image.png

React Native組件的生命周期大致上可以劃分為實例化階段、存在階段和銷毀階段，其中最常用的為實例化階段，該階段就是組件的構建、展示時期，需要我們根據幾個函數的調用過程，控制好組件的展示和邏輯的處理。

二、實例化階段函數功能分析

    getDefaultProps

該函數用于初始化一些默認的屬性，通常會將固定的內容放在這個函數 中進行初始化和賦值；
在組件中，可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后，再次使用該組件不會調用getDefaultProps函數，所以組件自己不可以自己修改props（即：props可認為是只讀的），只可由其他組件調用它時在外部修改。

  getInitialState

   該函數是用于對組件的一些狀態進行初始化；
   由于該函數不同于getDefaultProps，在以后的過程中，會再次調用，所以可以將控制控件的狀態的一些變量放在這里初始化，如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值， 比如：

this.setState({
selectIndex: selectIndex,
currentY: contentOffSetY
});
注意：一旦調用了this.setState方法，組件一定會調用render方法，對組件進行再次的渲染，不過，如果React框架會自動根據DOM的狀態來判斷是否需要真正的渲染。

    componentWillMount

相當于OC中的ViewWillAppear方法，在組件將要被加載在視圖上之前調用，功能相對較少。

    render

  render是一個組件中必須有的方法，本質上是一個函數，并返回JSX或其他組件來構成DOM，和Android的XML布局類似，注意：只能返回一個頂級元素 ;
   此外，在render函數中，只可通過this.state和this.props來訪問在之前函數中初始化的數據值 。

componentDidMount

   在調用了render方法后，組件加載成功并被成功渲染出來以后，所要執行的后續操作，一般會在這個函數中處理網絡請求等加載數據的操作；
   因為UI已經成功被渲染出來， 所以放在這個函數里進行請求操作，不會出現UI上的錯誤。
  下面的代碼是利用了fetch API來異步請求Web API來加載數據：

  componentDidMount(){
    this.loadData();
  }

  loadData(){
    fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
  }

三、存在期階段函數功能分析

componentWillReceiveProps    

指父元素對組件的props或state進行了修改

shouldComponentUpdate    

一般用于優化，可以返回false或true來控制是否進行渲染

componentWillUpdate

組件刷新前調用，類似componentWillMount

componentDidUpdate

更新后的hook
四、銷毀期階段函數功能分析
用于清理一些無用的內容，如：點擊事件Listener，只有一個過程：componentWillUnmount

五、常用知識點分析
5.1 this.state
開發中組件免不了要與用戶互動，React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI。
舉個例子：

constructor(props) {
    super(props);
    this.isGoodeGuy = true;
    this.state = {
      content:'what a person are you ?'
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={()=>{
          this.setState({content:this.isGoodeGuy?'好人':'爛人'})
        }}>
          <Text>{this.state.content}</Text>
        </TouchableOpacity>
      </View>
    );
  }

   當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

  可以把組件看成一個“狀態機”. 根據不同的status有不同的UI展示。只要使用setState改變狀態值，根據diff算法算出來有差以后，就會執行ReactDom的render方法，重新渲染頁面。

   注意：由于 this.props 和 this.state 都用于描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。