class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      messageConstructor: 'stateが初期化されました。',
      messageMount: '',
      messageUpdate: '',
      count: 0,
    }
  }

  messageMountFunc = () => {
    this.setState({
      messageMount: 'componentDidMountが実行されました。',
      messageUpdate: 'componentDidUpdateが実行できます。'
    });
  }

  componentDidMount() {
    setTimeout(this.messageMountFunc, 3000);
  }

  componentDidUpdate() {
    document.getElementById('counter').addEventListener('click', this.countUp);
  }

  componentWillUnmount() {
    document.getElementById('counter').removeEventListener('click', this.countUp);
  }

  countUp = () =>{
    this.setState({'count': this.state.count + 1})
  }

  render() {
    return (
      <div>
        <div>【constructor()】{this.state.messageConstructor}</div>
        <hr />
        <div>【componentDidMount()】{this.state.messageMount}</div>
        <hr />
        <div>【componentDidUpdate】{this.state.messageUpdate}</div>
        <div>{this.state.count}</div>
        <button id="counter">Count Up</button>
      </div>
    )
  }
}

ReactDOM.render(<　App />, document.getElementById('react-container'));