React 生命周期 constructor->componentWillMount->render->componentDidMount->componentWillUnmount

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 生命周期 constructor->componentWillMount->render->componentDidMount->componentWillUnmount</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Clock extends React.Component {
  constructor () {
    super()
    this.state = {
      date: new Date()
    }
    console.log('construct')
  }
  componentWillMount () {
    this.timer = setInterval(() => {
      this.setState({ date: new Date() })
    }, 1000)
    console.log('component will mount')
  }
  componentDidMount () {
    console.log('component did mount')
  }  
  componentWillUnmount () {
    clearInterval(this.timer)
    console.log('component will unmount')
  }
  render () {
    console.log('render')
    return (
      <div>
        <h1>
          <p>现在的时间是</p>
          {this.state.date.toLocaleTimeString()}
        </h1>
      </div>
    )
  }  
}

class Index extends React.Component {
  constructor () {
    super()
    this.state = { isShowClock: true }
  }

  handleShowOrHide () {
    this.setState({
      isShowClock: !this.state.isShowClock
    })
  }

  render () {
    return (
      <div>
        {this.state.isShowClock ? <Clock /> : null }
        <button onClick={this.handleShowOrHide.bind(this)}>
          显示或隐藏时钟
        </button>
      </div>
    )
  }
}
ReactDOM.render(
  <Index />,
  document.getElementById('root')
);
</script>
</body>
</html>