Android React Native組件的生命周期及回調函數


       熟悉android的童鞋應該都清楚,android是有生命周期的,其很多組件也是有生命周期。今天小編和大家分享的React Native組件的生命周期,還不了解的童鞋,趕緊來圍觀吧

       在android開發中,React Native組件的生命周期,大致分為三個階段,分別是:

1、組件第一次繪制階段,這個階段主要是組件的加載和初始化;

2、組件在運行和交互階段,這個階段組件可以處理用戶交互,或者接收事件更新界面;

3、組件卸載消亡的階段,這個階段主要是組件的清理工作。

 

在Android React Native組件的整個生命周期中,還有10個回調函數,不得不知。

1、object getDefaultProps()在組件類創建的時候調用一次,然后返回值被緩存下來。

2、object getInitialState()在組件掛載之前調用一次。返回值將會作為 this.state 的初始值。

3、componentWillMount ()在初始化渲染執行之前立刻調用。

4、ReactComponent render()這個方法是必須的,對視圖進行渲染,你也可以返回 null 或者 false 來表明不需要渲染任何東西。

5、componentDidMount()在初始化渲染執行之后立刻調用一次。

6、componentWillReceiveProps(object nextProps)在組件接收到新的 props 的時候調用。在初始化渲染的時候,該方法不會調用。可以用於更新 state 來響應某個 prop 的改變。

7、boolean shouldComponentUpdate(object nextProps, object nextState)在接收到新的 props 或者 state,將要渲染之前調用,如果確定新的 props 和 state 不會導致組件更新,則此處應該 返回 false。返回true將進行渲染。

8、componentWillUpdate(object nextProps, object nextState)在接收到新的 props 或者 state 並且shouldComponentUpdate返回true時調用。

 

9、componentDidUpdate(object prevProps, object prevState)在組件的更新已經同步到 DOM 中之后立刻被調用。

10、componentWillUnmount()在組件從 DOM 中移除的時候立刻被調用。在該方法中執行任何必要的清理,比如無效的定時器,或者清除在 componentDidMount 中創建的 DOM 元素。

 

為加深大家對相關知識的掌握和了解,下面我們一起來看看測試代碼吧:

 

/**

* Sample React Native App

* http://www.maiziedu.com

*/

'use strict';

var React = require('react-native');

var {

  AppRegistry,

  StyleSheet,

  View,

} = React;

var AwesomeProject = React.createClass({

  //在組件類創建的時候調用一次,然后返回值被緩存下來。

  getDefaultProps:function(){

    console.log("getDefaultProps");

    return null;

  },

  //初始化狀態,在組件掛載之前調用一次。返回值將會作為 this.state 的初始值。

  getInitialState:function(){

    console.log("getInitialState");

    return null;

    //必須有返回值,可以是NULL或者一個對象。

  },

  //組件將要被渲染

  componentWillMount:function(){

    console.log("componentWillmount");

  },

  //渲染視圖

  render:function(){

    console.log("render");

    return (

      <View>

      </View>

    );

    //你也可以返回 null 或者 false 來表明不需要渲染任何東西

  },

  //渲染視圖完成后

  componentDidMount:function(){

    console.log("componentDidMount");

    this.loadDataToSetState();

  },

  //組件接收到新屬性,在初始化渲染的時候,該方法不會調用。

  componentWillReceiveProps:function(nextProps){

    console.log("componentWillReceiveProps");

    //console.log(nextProps);

  },

  //組件是否需要更新

  shouldComponentUpdate:function(nextProps,nextState){

    console.log("shouldComponentUpdate");

    //console.log(nextProps+"|"+nextState);

    return true;

  },

  //組件將要被更新

  componentWillUpdate:function(nextProps,nextState){

    console.log("componentWillUpdate");

    //console.log(nextProps+"|"+nextState);

  },

  //組件更新完畢

  componentDidUpdate:function(prevProps,prevState){

    console.log("conponentDidUpdate");

    //console.log(prevProps+"|"+prevState);

  },

  //組件被銷毀之前,做清理操作

  componentWillUnmount:function(){

    console.log("componentWillUnmount");

  },

  loadDataToSetState:function(){

    console.log("loadDataToSetState");

    this.setState({

      name : "RN"

    })

  },

});

var styles = StyleSheet.create({

});

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

 

最后的輸出如下,我們再 componentDidMount 中調用了 loadDataToSetState 函數,該函數中通過了setState函數對state進行了設置,這時候就會回調shouldComponentUpdate,如果返回true,則會繼續調用 componentWillUpdate , render , conponentDidUpdate ,之后按返回鍵退出應用,則會進行銷毀操作,回調

 

componentWillUnmount

 

getDefaultProps

getInitialState

componentWillmount

render

componentDidMount

loadDataToSetState

shouldComponentUpdate

componentWillUpdate

render

conponentDidUpdate

componentWillUnmount

 

而關於 componentWillReceiveProps 函數的觸發是在props屬性改變之后才會觸發,我在代碼中嘗試着修改這個屬性,但是無果,會報錯,姑且不理會。只要理解了何時調用就好了。

而關於調試,React-Native官網提供了一個Chrome下調試的插件,見 Chrome Developer Tools ,安裝了該插件后,在手機上的開發者選項中開啟debug js,就可以在chrome中看到控制台輸出的信息以及js的報錯信息了。

 

以上就是Android React Native組件的生命周期及相關函數的使用,希望對大家學習相關知識有所幫助。

 

相關文章:《Android開發工具常用快捷鍵大全

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM