react组件生命周期

react组件生命周期

var maoyan = React.createClass({

  //组件挂载之前
  getInitialState : function(){
    console.log("组件挂载.... 之前 getInitialState");
    return {
      "api" : "没有"
    }
  },

  //初始化渲染之后
  componentDidMount : function(){
    console.log("init 渲染 之后 componentDidMount");
    this.loadData();
  },

  //初始化渲染之前
  componentWillMount : function(){
      console.log("init 渲染 之前 componentWillMount")
  },


  //在组件接收到新的 props 的时候调用
  componentWillReceiveProps : function(){
      console.log("componentWillReceiveProps...");
  },

  //在接收到新的 props 或者 state，将要渲染之前调用
  shouldComponentUpdate : function(){
    console.log("shouldComponentUpdate...");

    return true;
  },

  //在接收到新的 props 或者 state 之前立刻调用
  componentWillUpdate : function(){
    console.log("componentWillUpdate...");
  },

  //在组件的更新已经同步到 DOM 中之后立刻被调用
  componentDidUpdate : function(){
      console.log("componentDidUpdate...")
  },


  //组件移除
  componentWillUnmount : function(){
    console.log("remove component...")
  },

  loadData : function(){
    MaoYanService.getMovieList()
        .then((res) => {
          console.log("数据拉成功");
          this.setState({
            api : res
          })

        })
        .catch((ex) =>{
          alert(ex);
        });

  },
  render: function() {
    console.log("render....");
    var api = this.state.api;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
          {api.status}
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});