React Native組件的生命周期大致上可以劃分為實(shí)例化階段、存在階段和銷毀階段，其中最常用的為實(shí)例化階段，該階段就是組件的構(gòu)建、展示時(shí)期，需要我們根據(jù)幾個(gè)函數(shù)的調(diào)用過程，控制好組件的展示和邏輯的處理。在下圖中描述了React Native中組件的生命周期，我們可以根據(jù)其中的執(zhí)行順序在對(duì)應(yīng)的函數(shù)中做對(duì)應(yīng)的操作。

圖片.png

圖片.png

實(shí)例化階段函數(shù)功能分析

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

• getInitialState
  該函數(shù)是用于對(duì)組件的一些狀態(tài)進(jìn)行初始化；
  由于該函數(shù)不同于getDefaultProps，在以后的過程中，會(huì)再次調(diào)用，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化，如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值， 比如：
  this.setState({
  activePage: activePage,
  currentX: contentOffSetX
  });
  注意：一旦調(diào)用了this.setState方法，組件一定會(huì)調(diào)用render方法，對(duì)組件進(jìn)行再次的渲染，不過，如果React框架會(huì)自動(dòng)根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染。

• componentWillMount
  相當(dāng)于OC中的ViewWillAppear方法，在組件將要被加載在視圖上之前調(diào)用，功能相對(duì)較少。如果在render中改變了某些狀態(tài)機(jī)變量，那么RN不會(huì)執(zhí)行渲染，而是等待該函數(shù)執(zhí)行完畢后再次渲染。子組件中同樣擁有該方法，并會(huì)在父組件執(zhí)行完畢后執(zhí)行，該函數(shù)無返回值。該函數(shù)適合于需要在本地讀取一些數(shù)據(jù)用于顯示，那么在render執(zhí)行前調(diào)用是一個(gè)很好的時(shí)機(jī)。

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

• componentDidMount
  在調(diào)用了render方法后，組件加載成功并被成功渲染出來以后，所要執(zhí)行的后續(xù)操作，一般會(huì)在這個(gè)函數(shù)中處理網(wǎng)絡(luò)請(qǐng)求等加載數(shù)據(jù)的操作；
  因?yàn)閁I已經(jīng)成功被渲染出來， 所以放在這個(gè)函數(shù)里進(jìn)行請(qǐng)求操作，不會(huì)出現(xiàn)UI上的錯(cuò)誤。

在實(shí)例化階段，我們可以通過一個(gè)示例來了解，通過觸摸事件來改變函數(shù)的變量值：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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


// ES5寫法
var DTouchabelDemo = React.createClass({
  // 不可改變的值
  getDefaultProps(){
     return{
        age: 18
     }
  },

 // 可以改變的值
  getInitialState(){
     return{
       title:'不透明觸摸',
       person: '張三'
     }
  },

  render() {
    return (
        <View ref="topView" style={styles.container}>
          <TouchableOpacity
              activeOpacity={0.5}
              onPress={()=>this.activeEvent('點(diǎn)擊')}
              onPressIn={()=>this.activeEvent('按下')}
              onPressOut={()=>this.activeEvent('抬起')}
              onLongPress={()=>this.activeEvent('長按')}
              >
            <View style={styles.innerViewStyle}>
              <Text ref="event">常用的事件</Text>
            </View>
          </TouchableOpacity>

          <View>
              <Text>{this.state.title}</Text>
              <Text>{this.state.person}</Text>
              <Text>{this.props.age}</Text>
          </View>
        </View>
    );
  },

  activeEvent(event){
    // 更新狀態(tài)機(jī)
     this.setState({
        title: event,
        person:'李四'
     })

    // 拿到View
    this.refs.topView
    this.refs.event
  }
});

// ES6寫法
// class DTouchabelDemo extends Component {
//
// }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  innerViewStyle:{
    backgroundColor:'red'
  }
});

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

存在期階段函數(shù)功能分析

• componentWillReceiveProps
  指父元素對(duì)組件的props或state進(jìn)行了修改，該函數(shù)的原型為componentWillReceiveProps(nextProps)，當(dāng)props(屬性)發(fā)生改變或者接受到新的props時(shí)，該函數(shù)被調(diào)用，并接受一個(gè)輸入?yún)?shù)，類型為Object，存放新的props，原先反生改變的舊的props仍然可以通過this.props訪問。該函數(shù)在RN初次被渲染的時(shí)候不會(huì)被調(diào)用。如果在該函數(shù)當(dāng)中對(duì)狀態(tài)機(jī)變量進(jìn)行了修改，RN不會(huì)立即渲染頁面，而是會(huì)等待該方法執(zhí)行完畢后一起渲染。
• shouldComponentUpdate （組件是否需要更新）
  該函數(shù)原型 : boolean shouldComponentUpdate(nextProps,nextState)，一般用于優(yōu)化，可以返回false或true來控制是否進(jìn)行渲染，當(dāng)props(屬性)或者狀態(tài)(state)發(fā)生改變的時(shí)候會(huì)觸發(fā)該函數(shù)，分別對(duì)應(yīng)接收的兩個(gè)參數(shù)，根據(jù)返回的布爾值來決定是否需要對(duì)頁面進(jìn)行重新渲染，如果不進(jìn)行渲染，那么該方法后續(xù)的componentWillUpdate與componentDidUpdate都不會(huì)被執(zhí)行。該函數(shù)默認(rèn)會(huì)返回true。應(yīng)用場景：可以在該函數(shù)中編寫一些邏輯來判斷渲染類型，來阻值一些沒有必要的重新渲染，達(dá)到提升應(yīng)用運(yùn)行效率的目的。
• componentWillUpdate
  該方法原型與上一方法相同，在重新渲染前會(huì)調(diào)用該方法，為渲染進(jìn)行準(zhǔn)備工作。組件刷新前調(diào)用，類似componentWillMount。注意：在該方法中，不應(yīng)該對(duì)狀態(tài)機(jī)變量進(jìn)行修改，要改變，也應(yīng)該在1.1.5當(dāng)中進(jìn)行。
• componentDidUpdate
  更新后的hook，該方法會(huì)在RN卸載之前調(diào)用，無參無返回值，在該方法中，需要對(duì)該組件當(dāng)中申請(qǐng)或者訂閱的某些資源與消息進(jìn)行釋放。

銷毀期階段函數(shù)功能分析

用于清理一些無用的內(nèi)容，如：點(diǎn)擊事件Listener，只有一個(gè)過程：componentWillUnmount