React Life Cycle

lifecycleofReact.js

var isLoaded=false;
var LifeCycle = React.createClass({
  getInitialState(){      
    $('#output').append("getInitialState\n");
    return{
      childFoobar: false
    };
  },

  getDefaultProps(props){
      console.log(this.props,props);
      $('#output').append("[로딩될 때]\n\n");
    $('#output').append("getDefaultProps\n");
    return{}
  },
  componentWillReceiveProps(nextProps){
    console.log('componentWillReceiveProps is called');
    $('#output').append("componentWillReceiveProps\n");
    if(nextProps.childFoobar){
        this.setState({
          childFoobar: nextProps.childFoobar
        });
    }
  },
  componentWillMount(){
    $('#output').append("componentWillMount\n");
  },
  componentDidMount(){
   $('#output').append("componentDidMount\n");
  },
  shouldComponentUpdate(){
    $('#output').append("shouldComponentUpdate\n");
    //return true;
  },
  componentWillUpdate(){
    $('#output').append("componentWillUpdate\n");
  },
  componentDidUpdate(){
    $('#output').append("componentDidUpdate\n");
  },
  componentWillUnmount(){
    $('#output').append("componentWillUnmount\n");
  },
  changeState(){
      $('#output').append("\n[state가 바뀔 때]\n\n");
    this.setState({
      childFoobar :true
    });
  },
  render(){
    $('#output').append("render\n");
    return(
        <div  className="lifecycle">
            <a href="#" onClick={this.changeState}>state가 바뀔때(클릭)</a>
      </div>
    );
  }
});
var LifeCycleParent = React.createClass({
  getDefaultProps(props){
    $('#output').append("Parent getDefaultProps\n");
    return{}
  },
    getInitialState(){
    return{
      isFoobar: false,
      childFoobar : false
    };
  },
  changeProps(){
       $('#output').append("\n[props가 바뀔 때]\n\n");
   this.setState({
      isFoobar: true,
      childFoobar :false
    });
  },
  render(){
      return(<div className="lParent">
              <a href="#" onClick={this.changeProps}>props가 바뀔때</a>&nbsp;&nbsp;
                    <LifeCycle isFoobar={this.state.isFoobar} childFoobar={this.state.childFoobar}/></div>)
  }
});
var reset = function(){ $('#output').empty();}
$('#loading').click(()=>{
    if(!isLoaded){
      isLoaded=true;
        reset();
        ReactDOM.render(<LifeCycleParent />, document.getElementById("app"));
   }
});

$('#unloading').click(()=>{
    if(isLoaded){
      isLoaded=false;
        reset();
        ReactDOM.unmountComponentAtNode(document.getElementById("app"));
  }
});