React Очень короткая шпаргалка

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class Time extends Component {
  // Actions
  handleCounterUp () {
    this.setState(Object.assign({}, this.state, {counter: this.state.counter + 1}));
  }
  handleInputChange (event) {
    this.setState(Object.assign({}, this.state, {value: event.target.value.toUpperCase()}));
  }
  handleSubmitForm (event) {
    event.preventDefault();
    alert('Value: ' + this.state.value);
  }
  // First render (only once)
  constructor (props) {
    super(props);
    this.state = {
      time: null,
      counter: 0,
      value: ''
    };
    this.handleCounterUp = this.handleCounterUp.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
  }
  // setState OK
  componentWillMount () {
    this.setState(Object.assign({}, this.state, {time: new Date()}));
  }
  render () {
    return (
      <div>
        {/* Это комментарий */}
        <p>
          <span>пробелы</span>{' '}
          <span>между тэгами</span>{' '}
          <span>на разных строках</span>
        </p>
        <ul>
          {
            [1, 2, 3].map(
              function (value, index) {
                return <li key={index}>{value}</li>;
              }
            )
          }
        </ul>
        <div ref="message">My message</div>
        <div>{this.state.time.toString()}</div>
        <div>{this.props.time.toString()}</div>
        <div>{this.state.counter}</div>
        <div onClick={this.handleCounterUp}>Counter up</div>
        <form onSubmit={this.handleSubmitForm}>
          <input type="text" value={this.state.value} onChange={this.handleInputChange} />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
  componentDidMount () {
    var self = this;
    this.timeoutId = setTimeout(function () {
      self.setState(Object.assign({}, self.state, {time: new Date()}));
    }, 1000);
    // Actions after we updated DOM
    // Here we can use jQuery to manipulate the DOM
    // $('input-id).val('');
    console.log(this.refs.message.innerText);
  }
  // Unmount in the end
  componentWillUnmount () {
    clearTimout(this.timeoutId);
  }
  // Next Props change - setState OK
  componentWillReceiveProps (nextProps) {
    this.setState(Object.assign({}, this.state, {time: nextProps.time}));
  }
  // Props change or only Next State change
  shouldComponentUpdate (nextProps, nextState) {
    return this.state.time.getTime() !== nextProps.time.getTime();
  }
  // No setState
  componentWillUpdate (nextProps, nextState) {
    // Actions before we updated DOM
  }
  // Render and then
  componentDidUpdate (prevProps, prevState) {
    // Actions after we updated DOM
    // Here we can use jQuery to manipulate the DOM
    // $(this._ref.input).val(');
    console.log(this.refs.message.innerText);
  }
}

ReactDOM.render(<Time time={new Date(new Date().getTime() + 100000000)} />, document.getElementById('root'));