React component lifycycle

part 2

by rupesx

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
<p>Whenever a componenet render to the DOM, certain things happend before rendering and something after rendering all this process call "component lifecycle" </p>
<br />
<div id="app"></div>

Babel + JSX

var LifecycleComponent = React.createClass({
	increment: function(){
  	this.setState({
    	count: this.state.count + 1
    })
  },
  //1 called Once
  //Before component is rendered
  getDefaultProps: function(){
  	console.log("Getting our default props");
  },
  //2 called Once
  //Before component is rendered
  getInitialState: function(){
    console.log("Getting initial state");
   return({
     count: 0
   })
  },
  //3 called once
  //Before component is rendered
  componentWillMount: function(){
    console.log(this.state);
    console.log(this.props);
    console.log("component is mounting");
  },
  //4 
  //Happen whenever our component changes
	render: function(){
    console.log("component is rendered")
    return(
    	<button onClick={this.increment}>{this.state.count}</button>
    )
  },
  // 5 only once
  //afer component has rendered
  componentDidMount: function(){
    console.log("component has rendered");
   // console.log(this.state);
   // console.log(this.state);
   // console.log(ReactDOM.findDOMNode(this));
    this.interval = setInterval(this.increment, 1000);
  },
  //6 only once
  //After component has rendered
  componentWillUnmount: function(){
    clearInterval(this.interval);
    console.log('Component unmounted');
  }
  
});

var LifecycleContainer = React.createClass({
  mount: function(){
    ReactDOM.render(
      <LifecycleComponent/>,
      document.getElementById('renderHere')
    );
  },
  unmount: function(){
    ReactDOM.unmountComponentAtNode(document.getElementById('renderHere'));
  },
 render: function(){
   console.log("LifecycleContainer rendered");
   return(
        <div>
       <button onClick={this.mount}>Mount</button>
       <button onClick={this.unmount}>Unmount</button>
       <div id="renderHere"></div>  
     </div>
      )
 }
});


ReactDOM.render(
	<LifecycleContainer/>,
  document.getElementById('app')
)