Android React Native組件的生命周期

Android React Native組件的生命周期

和Android一樣，React的組件也有對應的生命周期。Android React Native組件的生命周期可以總的概括為下面這一張圖。

可以把組件生命周期大致分為三個階段：

生命周期回調函數總共有10個。

object getDefaultPrZ喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcHMoKTwvc3Ryb25nPjxiciAvPg0K1NrX6bz+wOC0tL2otcTKsbrytffTw9K7tM6jrMi7uvO3tbvY1rWxu7u6tObPwsC0oaPIq77WtffTw9K7tM6jrMv509DKtcD9ubLP7aGjPC9wPg0KPHA+PHN0cm9uZz5vYmplY3QgZ2V0SW5pdGlhbFN0YXRlKCk8L3N0cm9uZz48YnIgLz4NCtTa1+m8/rnS1NjWrsewtffTw9K7tM6ho7e1u9jWtb2ru+HX986qIHRoaXMuc3RhdGUgtcSz9cq81rWhozwvcD4NCjxwPjxzdHJvbmc+Y29tcG9uZW50V2lsbE1vdW50ICgpPC9zdHJvbmc+PGJyIC8+DQrU2rP1yry7r+TWyL7WtNDQ1q7HsMGiv8y199PDPC9wPg0KPHA+PHN0cm9uZz5SZWFjdENvbXBvbmVudCByZW5kZXIoKTwvc3Ryb25nPjxiciAvPg0K1eK49re9t6jKx7HY0Ou1xKOsttTK0828vfjQ0OTWyL6jrMTj0rK/ydLUt7W72CBudWxsILvy1d8gZmFsc2UgwLSx7cP3srvQ6NKq5NbIvsjOus62q873PC9wPg0KPHA+PHN0cm9uZz5jb21wb25lbnREaWRNb3VudCgpPC9zdHJvbmc+PGJyIC8+DQrU2rP1yry7r+TWyL7WtNDQ1q6688Giv8y199PD0ru0zjwvcD4NCjxwPjxzdHJvbmc+Y29tcG9uZW50V2lsbFJlY2VpdmVQcm9wcyhvYmplY3QgbmV4dFByb3BzKTwvc3Ryb25nPjxiciAvPg0K1NrX6bz+vdPK1bW90MK1xCBwcm9wcyC1xMqxuvK199PDo6zSsr7Nyse4uNfpvP7Q3rjE19PX6bz+tcTK9NDUyrG0pbeioaPU2rP1yry7r+TWyL61xMqxuvKjrLjDt723qLK7u+G199PDoaO/ydLU08PT2rj80MIgc3RhdGUgwLTP7NOmxLO49iBwcm9wILXEuMSx5KGjPC9wPg0KPHA+PHN0cm9uZz5ib29sZWFuIHNob3VsZENvbXBvbmVudFVwZGF0ZShvYmplY3QgbmV4dFByb3BzLCBvYmplY3QgbmV4dFN0YXRlKTwvc3Ryb25nPjxiciAvPg0K1Nq908rVtb3QwrXEIHByb3BzILvy1d8gc3RhdGWjrL2r0qrk1si+1q7HsLX308MsyOe5+8i3tqjQwrXEIHByb3BzILrNIHN0YXRlILK7u+G1vNbC1+m8/rj80MKjrNTytMu0ptOmuMMgt7W72CBmYWxzZaGjt7W72HRydWW9q7340NDk1si+oaM8L3A+DQo8cD48c3Ryb25nPmNvbXBvbmVudFdpbGxVcGRhdGUob2JqZWN0IG5leHRQcm9wcywgb2JqZWN0IG5leHRTdGF0ZSk8L3N0cm9uZz48YnIgLz4NCtTavdPK1bW90MK1xCBwcm9wcyC78tXfIHN0YXRlILKix9JzaG91bGRDb21wb25lbnRVcGRhdGW3tbvYdHJ1ZcqxtffTwzwvcD4NCjxwPjxzdHJvbmc+Y29tcG9uZW50RGlkVXBkYXRlKG9iamVjdCBwcmV2UHJvcHMsIG9iamVjdCBwcmV2U3RhdGUpPC9zdHJvbmc+PGJyIC8+DQrU2tfpvP61xLj80MLS0b6tzayyvbW9IERPTSDW0NauuvPBor/Msbu199PDPC9wPg0KPHA+PHN0cm9uZz5jb21wb25lbnRXaWxsVW5tb3VudCgpPC9zdHJvbmc+PGJyIC8+DQrU2tfpvP600yBET00g1tDSxrP9tcTKsbrywaK/zLG7tffTw6Gj1Nq4w7e9t6jW0Na00NDIzrrOsdjSqrXEx+XA7aOsscjI587e0Ke1xLaoyrHG96Osu/LV38fls/3U2iBjb21wb25lbnREaWRNb3VudCDW0LS0vai1xCBET00g1KrL2KGjPC9wPg0KPHA+z8LD5sz5s/ay4srUtPrC66GjPC9wPg0KPHByZSBjbGFzcz0="brush:java;"> /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, View, Text } = 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 ( ); //你也可以返回 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

var Name =React.createClass({
    getDefaultProps:function(){
        console.log("Name getDefaultProps");
        return null;
    },
    getInitialState:function(){
        console.log("Name getInitialState");
        return null;
    },
    componentWillMount:function(){
        console.log("Name componentWillmount");
    },
    render:function(){
        console.log("Name render");
        return (
            
                Hello,{this.props.name? this.props.name:"None!"}
            
        );
    },
    componentDidMount:function(){
        console.log("Name componentDidMount");
    },
    componentWillReceiveProps:function(nextProps){
        console.log("Name componentWillReceiveProps");
        console.log(nextProps);
    },
    shouldComponentUpdate:function(nextProps,nextState){
        console.log("Name shouldComponentUpdate");
        return true;
    },
    componentWillUpdate:function(nextProps,nextState){
        console.log("Name componentWillUpdate");
    },
    componentDidUpdate:function(prevProps,prevState){
        console.log("Name conponentDidUpdate");
    },
    componentWillUnmount:function(){
        console.log("Name componentWillUnmount");
    },
});

return {name:"a"};

this.setState({
            name:"lizhangqu"
        });

var Parent = React.createClass({

    render:function(){
        return (
            
                
            

        );
    },

    getInitialState:function(){

        return {name:"a"};
    },

    componentDidMount:function(){

        this.setState({
            name:"lizhangqu"
        });
    },
});

var AwesomeProject = React.createClass({
  render: function() {
    return (
        
    );
  }
});

Name getDefaultProps
Name getInitialState
Name componentWillmount
Name render
Name componentDidMount
Name componentWillReceiveProps
Object {name: "lizhangqu"}
Name shouldComponentUpdate
Name componentWillUpdate
Name render
Name conponentDidUpdate
Name componentWillUnmount