<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>React Life cycle 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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Clock extends React.Component {
  constructor () {
    super(a)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>The time is now</p>
          {this.state.date.toLocaleTimeString()}
        </h1>
      </div>)}}class Index extends React.Component {
  constructor () {
    super(a)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)}>Shows or hides the clock</button>
      </div>
    )
  }
}
ReactDOM.render(
  <Index />.document.getElementById('root'));</script>
</body>
</html>
Copy the code