React Native的生命週期解析

　　在React Native中使用組件來封裝界面模塊時，整個界面就是一個大的組件，開發過程就是不斷優化和拆分界面組件、構造整個組件樹的過程。

 

 

　　上張圖涵蓋了一個組件從建立、運行到銷燬的整個過程。你們能夠看到，初始化的時候會調用5個函數（按前後順序）。這5個函數在整個組件被建立到銷燬的過程當中只調用一次。初始化完畢後，當組件的props或者state改變都會觸發不一樣的鉤子函數，繼而引起組件的從新渲染。如今咱們把這過程拆開一點一點來分析。

　　初始化

　　咱們先來看初始化，在初始化的過程當中，會按順序調用下面5個函數。

getDefaultProps：組件實例建立前調用，多個實例間共享引用。注意：若是父組件傳遞過來的Props和你在該函數中定義的Props的key同樣，將會被覆蓋。
在組件中，咱們能夠利用this.props獲取在這裏初始化它的屬性，因爲組件初始化後，再次使用該組件不會調用getDefaultProps函數，因此組件本身不能夠修改props，只可由其餘組件調用它時再外部進行修改。

getInitalState:組件示例建立的時候調用的第一個函數。主要用於初始化state。注意：爲了在使用中不出現空值，建議初始化state的時候儘量給每個可能用到的值都賦一個初始值。

　該函數不一樣於getDefaultProps,在之後的過程當中，會再次調用，因此能夠將控制控件狀態的一些變量放在這裏初始化，好比控件上顯示的文字，能夠經過this.state來獲取值，經過this.setState來修改state值。注意：一旦調用了this.setState方法，組件必定會調用render方法，對組件進行再次渲染，不過，React框架會根據DOM的狀態自動判斷是否須要真正渲染。

　

　componentWillMount：在render前，getInitalState以後調用。僅調用一次，能夠用於改變state操做。

render：組件渲染函數，會返回一個Virtual DOM，只容許返回一個最外層容器組件。render函數儘可能保持純淨，只渲染組件，不修改狀態，不執行副操做（好比計時器）。 componentDidMount:在render渲染以後，React會根據Virtual DOM來生成真實DOM，生成完畢後會調用該函數。
在瀏覽器端（React），咱們能夠經過this.getDOMNode()來拿到相應的DOM節點。然而咱們在RN中並用不到，在RN中主要在該函數中執行網絡請求，定時器開啓等相關操做
在調用了render方法，組件加載成功並被成功渲染出來以後，所要執行的後續操做，通常都會在這個函數中進行，好比常常要面對的網絡請求等加載數據操做

　　運行中

　　初始化完成以後，組件將會進入到運行中狀態，運行中狀態咱們將會遇到以下幾個函數：

componentWillReceiveProps(nextProps)：props改變（父容器來更改或是redux），將會調用該函數。新的props將會做爲參數傳遞進來，老的props能夠根據this.props來獲取。咱們能夠在該函數中對state做一些處理。注意：在該函數中更新state不會引發二次渲染。
 boolean shouldComponentUpdate(object nextProps, object nextState)：該函數傳遞過來兩個參數，新的state和新的props。state和props的改變都會調到該函數。該函數主要對傳遞過來的nextProps和nextState做判斷。若是返回true則從新渲染，若是返回false則不從新渲染。在某些特定條件下，咱們能夠根據傳遞過來的props和state來選擇更新或者不更新，從而提升效率。

 componentWillUpdate(object nextProps, object nextState)：與componentWillMount方法相似，組件上會接收到新的props或者state渲染以前，調用該方法。可是不能夠在該方法中更新state和props。

 render：跟初始化的時候功能同樣。
 componentDidUpdate(object prevProps,object prevState):和初始化時期的componentDidMount相似，在render以後，真實DOM生成以後調用該函數。傳遞過來的是當前的props和state。在該函數中一樣可使用this.getDOMNode()來拿到相應的DOM節點。若是你須要在運行中執行某些副操做，請在該函數中完成。

　　銷燬

　　銷燬階段只有一個函數，很簡單

componentWillUnmount：組件DOM中移除的時候調用。在這裏進行一些相關的銷燬操做，好比定時器，監聽等等。

　　案例代碼

import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Student from './Student';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickText: "開始點擊按鈕",
      count: 1,
      detailContent: true
    }
  }

  componentWillMount() {
    console.log("componentWillMount1111");
  }

  shouldComponentUpdate(nextProps, nextState){
    console.log(this.state.detailContent,'detailContent');
    if (this.state.count !== nextState.count) {
      console.log("shouldComponentUpdate1111---組件須要更新");
      return true;
    }
    return false;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate1111---組件將要更新");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate1111---組件更新完畢");
  }

  componentDidMount() {
    console.log("componentDidMount1111");
  }

  componentWillUnmount() {
    console.log("componentWillUnmount1111");
  }

  clickButton(){
    const { count } = this.state;
    this.setState({
      clickText: "我點擊了按鈕",
      count: count + 1,
      detailContent: false
    })
  }

  render() {
    console.log("render1111");
    return (
      <View style={styles.container}>
        <Text>歡迎來到首頁</Text>
        <TouchableOpacity
          onPress={() => Actions.notice()}
        >
          <Text>跳轉到公告頁</Text>
        </TouchableOpacity>
        <Text style={{color: 'blue', fontSize: 40}}>{this.state.count}</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.clickButton()}
        >
          <Text>{this.state.clickText}</Text>
        </TouchableOpacity>
        <Student detailContent={this.state.detailContent}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  button: {
    width: 250,
    height: 60,
    backgroundColor: 'red',
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

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

export default class Student extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentWillMount() {

  }

  componentWillReceiveProps(nextProps){
    console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
    console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <View style={styles.container}>
        <Text>歡迎HomeDetails</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});