Reactライフサイクルを視覚化したサンプル

const r = (t) => {
  const result = document.getElementById('result');
  return result.innerHTML = '<li>' + t + '</li>' + result.innerHTML;
};
const j = (t) => JSON.stringify(t);
const Counter = React.createClass({
  getDefaultProps: function() {
    // デフォルトのpropsを指定
    // propsはReactDOM.renderで指定したほうが良いため
    // なるべく使用しないほうが良い
    r('getDefaultProps');
    // return {name: 'foo'};
  },
  getInitialState: function() {
    // 初期値などを指定
    // 一番最初に実行されると説明しているサイトがあるが
    // getDefaultPropsがあると、そちらが先なので間違え
    // npm使用時はgetInitialStateではなくconstructor()
    r('getInitialState');
    return {len: 0}
  },
  componentWillMount: function() {
    // マウントされる直前
    // componentWillMount後にrenderが実行される
    r('componentWillMount');
  },
  componentDidMount: function() {
    // マウントされた直後
    r('componentDidMount');
  },
  componentWillUnmount: function() {
    // アンマウントされる直前
    r('componentWillUnmount');
  },
  componentWillReceiveProps: function(newProps) {
    // プロパティを受け取る直前
    r('componentWillReceiveProps' + j(newProps));
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    // プロパティまたはステートを受け取る直前
    r('shouldComponentUpdate' + j(nextProps) + j(nextState));
    if (this.state.val === nextState.val) {
      return false;
    } else {
      return true;
    }
  },
  componentWillUpdate: function(nextProps, nextState) {
    // コンポーネントが更新される直前
    r('componentWillUpdate' + j(nextProps) + j(nextState));
  },
  componentDidUpdate: function(prevProps, prevState) {
    // コンポーネントが更新された直後
    r('componentDidUpdate' + j(prevProps) + j(prevState));
  },
  componentDidCatch: function(error, info) {
    // エラー発生時に実行
    r('componentDidCatch');
  },
  render: function() {
    r('render');
    return (
      <div>
        <input type="text" title={this.props.name} onChange={this.handleChange} />
        <button onClick={this.handleClick}>reset</button>
      </div>
    );
  },
  handleChange: function(e) {
    this.setState({
      val: e.target.value,
      len: e.target.value.length
    });
  },
  handleClick: function() {
    this.setState({
      val: undefined,
      len: undefined
    });
  }
});

ReactDOM.render(
  <Counter name='foo' />,
  document.getElementById('app')
);

const unmount = document.getElementById('unmount');
unmount.addEventListener('click', () => {
  ReactDOM.unmountComponentAtNode(document.getElementById('app'));
});

const renderNameBar = document.getElementById('renderNameBar');
renderNameBar.addEventListener('click', () => {
  ReactDOM.render(
    <Counter name='bar' />,
    document.getElementById('app')
  );
});