React Native 生命週期

主要分爲三個階段：
實例化階段、存在階段、銷燬階段
android

經常使用的是實例化階段：
這個階段負責組件的構建和展現的時間，須要咱們根據幾個函數的調用過程，控制好組件的展現和邏輯處理
web

實例化階段函數：

getDefaultProps：是固定不變的常量
在組件中，咱們能夠利用this.props獲取在這裏初始化它的屬性，因爲組件初始化後，再次使用該組件不會調用getDefaultProps函數，因此組件本身不能夠修改props，只可由其餘組件調用它時再外部進行修改。網絡

getIntialState：放能夠改變的一些值
該函數用於對組件一些狀態進行初始化
該函數不一樣於getDefaultProps,在之後的過程當中，會再次調用，因此能夠將控制控件狀態的一些變量放在這裏初始化，好比控件上顯示的文字，能夠經過this.state來獲取值，經過this.setState來修改state值。框架

constructor(props) {
    super(props)
    this.state = { title:'默認文字' }
  }
  textPress(value){
    // console.warn('點擊成功')
    this.setState({
      title:value
    })
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity activeOpacity={0.5}
           onPress={()=>this.textPress('點擊')}
           style={styles.textStyle}>
          <Text>我是文字。點擊下看看吧</Text>
        </TouchableOpacity>
        <Text>{this.state.title}</Text>
      </View>
    );
  }

注意：一旦調用了this.setState方法，組件必定會調用render方法，對組件進行再次渲染，不過，React框架會根據DOM的狀態自動判斷是否須要真正渲染
componentWillMount：組件將要被加載到視圖以前調用，開發中無實際意義svg

render：經過，this.state和this.setState訪問以前函數的值函數

componentDidMount: 在調用了render方法，組件加載成功並被成功渲染出來以後，所要執行的後續操做，通常都會在這個函數中進行，好比常常要面對的網絡請求等加載數據複雜操做優化

存在階段函數

shouldComponentUpdate:通常用於優化，能夠返回false或true來控制是否進行渲染(true 的話進行下2步操做，false不會進行下去)
componentWillUpdate: 組件刷新前調用
componentDidUpdate：更新後this

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

  componentWillUpdate(){
    console.warn("組件將要更新");
  }

  componentDidUpdate(){
    console.warn("組件更新完畢");
  }

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

// 在子組件中對父元素props或state的改變進行監聽進行相應的操做
componentWillReceiveProps(nextProps){
    console.warn(this.props.detailContent,'this--->>componentWillReceiveProps');
    console.warn(nextProps.detailContent,'next--->>componentWillReceiveProps')
  }
// componentWillReceiveProps -> 改變後執行父組件中 shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate

銷燬階段函數

componentWillUnmount ：用於清理一些無用的內容，好比：清除定時器或不須要的監聽事件.net

componentWillUnmount() {
        if(Platform.OS == 'android') {
             this.createlistener.remove();
        }
             this.preparlistener.remove();
             this.complelistener.remove();
        this.stop();
        this.putStudyStatus();
        clearInterval(nIntervod);
    }

本文同步分享在博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。