React的生命周期

<script type="text/babel">
  const { Component, useState } = React;
  class App extends Component {
    // 在使用class定义组件的时候 此方法相当于初始化阶段
    constructor(props) {
      super(props)
      this.state = {
        now: (new Date())
      }
      setInterval(() => {
        this.resetTime()
      }, 1000);
    }
    resetTime() {// 更新当前的时间之后 会触发shouldComponentUpdate方法
      this.setState({
        now: (new Date())
      })
    }
    componentWillMount() {
      console.log('组件渲染之前');
    }
    componentDidMount() {
      console.log('组件挂载完成之后执行');
    }
    componentWillReceiveProps(p) {
      console.log('组件接收props属性值');
    }

    // 此方法用以判断是否需要对组件进行更新,返回true或者false. 默认返回false
    shouldComponentUpdate(p, s) {
      console.log('组件是否需要更新')
      return true
    }

    // 当state或者props发生改变之后会执行组件的更新流程
    componentWillUpdate() {
      console.log('组件更新之前执行')
    }
    componentDidUpdate() {
      console.log('组件更新完成之后执行')
    }
    componentWillUnMount() {
      console.log('组件卸载之后执行')
    }
    render() {
      console.log('组件执行渲染!!!!!!!!!!!!!!!!!!!!!!')
      return (<div className="container">
        <h3>我是一个标签</h3>
        <p>当前事件为：{this.state.now.toUTCString()}</p>
      </div>)
    }
  }
  ReactDOM.render(<App />, document.getElementById('root'))
</script>

结果：

注：

      当shouldComponentUpdate()的返回值设为false时，不会更新组件，会重复执行console.log('组件是否需要更新')

结果：