Simple React Lifecycle methods test

Child.js

import React from 'react'

var Child =  React.createClass({
  getInitialState: function(){
    console.log('Child getInitialState');
    return  { value: 'start'}
  },

  getDefaultProps: function(){
    console.log('Child getDefaultProps');
  },

  componentWillMount: function(){
    console.log('Child componentWillMount');
  },

  componentDidMount: function(){
    console.log('Child componentDidMount');
  },

  componentWillReceiveProps: function(){
    console.log('Child componentWillReceiveProps');
  },

  shouldComponentUpdate: function(){
    console.log('Child shouldComponentUpdate----true');
    return true

    // console.log('shouldComponentUpdate----false');
    // return false
  },

  componentWillUpdate: function() {
    console.log('Child componentWillUpdate');
  },


  componentDidUpdate: function() {
    console.log('Child componentDidUpdate');
  },

  componentWillUnmount: function() {
    console.log('Child componentWillUnmount');
  },

  render: function() {
    console.log('Child~~~~~~~~render~~~~~~~~');
    return (
      <h2>{this.props.text}</h2>
    );
  }

});

export default Child

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Child from './Child'

var LifeCycle =  React.createClass({
  getInitialState: function(){

    console.log('Parent getInitialState');
    return  { value: 'start'}
  },

  getDefaultProps: function(){
    console.log('Parent getDefaultProps');
  },

  componentWillMount: function(){
    console.log('Parent componentWillMount');
  },

  componentDidMount: function(){
    console.log('Parent componentDidMount');
  },

  componentWillReceiveProps: function(){
    console.log('Parent componentWillReceiveProps');
  },

  shouldComponentUpdate: function(){
    console.log('Parent shouldComponentUpdate----true');
    return true

    // console.log('shouldComponentUpdate----false');
    // return false
  },

  componentWillUpdate: function() {
    console.log('Parent componentWillUpdate');
  },

  componentDidUpdate: function() {
    console.log('Parent componentDidUpdate');
  },

  componentWillUnmount: function() {
    console.log('componentWillUnmount');
  },

  handleClick: function(event){
    console.log('Parent~~~~~~~~setSdate~~~~~~~~');
    this.setState({value: event.target.value}, function(){
      console.log('Parent~~~~~~~~this.setState callback~~~~~~~~')
    })
  },

  handleForceUpdate: function(event){
    console.log('Parent~~~~~~~~forceUpdate~~~~~~~~');
    this.forceUpdate(function(){
      console.log('Parent~~~~~~~~forceUpdate callback~~~~~~~~');
    })
  },

  handleUnmount: function(event){
    console.log('Parent~~~~~~~~Unmount~~~~~~~~');
    ReactDOM.unmountComponentAtNode(document.getElementById('root'));
  },

  render: function() {
    console.log('Parent~~~~~~~~render~~~~~~~~');
    return (
      <div>
        <Child text={this.state.value} />
        <button value="update state!" onClick={this.handleClick}>setState</button>
        <button value="forceUpdate state!" onClick={this.handleForceUpdate}>forceUpdate</button>
        <button value="Unmount!" onClick={this.handleUnmount}>Unmount</button>
      </div>
    );
  }

});

ReactDOM.render(<LifeCycle />, document.getElementById('root'))