ReactJS Component Life Cycle

https://gist.github.com/yang-wei/11d935161fe490c89d6b

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12">
             <button class="btn btn-primary" onClick="render()">Render</button>
        <button class="btn btn-danger" onClick="unmount()">Unmount</button>
        </div>
        <br/><br/>
        <div class="col-xs-12" id="react"></div>        
    </div>
</div>


<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body {
    padding-top: 30px;
}

JavaScript 1.7

/** @jsx React.DOM */
var Number = React.createClass({
    getDefaultProps: function() {
      console.log("getDefaultProps")
      return {
        val: ''
      }
    },
    getInitialState: function() {
      console.log("getInitialState");
      return {
        factor: ''
      }
    },
    increment: function() {
        this.setProps({
            val: ++this.props.val
        });
    },
    componentWillMount: function  {
      console.log("componentWillMount");
    },
    render: function() {
        console.log("render");
        return (
            <button className="btn btn-info" onClick={this.increment}>{this.props.val}</button>
        )
    },
    componentDidMount: function() {
      console.log("componentDidMount");
    },
    componentWillReceiveProps: function(nextProps) {
      /* update state and prop here */
      console.log("componentWillUpdate with param ");
      console.log(nextProps);
    },
    shouldComponentUpdate: function(nextProps, nextState) {
      /* return false to skip render, componemtWillUpdate and componentDidUpdate will be skipped too */
      console.log("shouldComponentUpdate");
      /* true is default */
      return true;
    },
    componentWillUpdate: function(nextProps, nextState) {
      /* do something to respond to state change here, can't use this.setState() here */
      console.log("componentWillUpdate");
    },
    componentDidUpdate: function(prevProps, prevState) {
      console.log("componentDidUpdate");
    },
    componentWillUnmount: function() {
      console.log("componentWillUnmount");
    }
});

window.render = function() {
    React.render(
        <Number val={2} />, 
        document.getElementById("react")
    )
 }

window.unmount = function() {
    React.unmountComponentAtNode(document.getElementById("react"));
}