生命周期

Component在加在时，会经历自己的候命周期：

• construct： 函数执行时开始调用，用户初始化state，props
• componentWillMount： 组件加在前调用
• render： 组件被加载到DOM上
• componentDidMount： 组件加在完成时调用
• componentWillUnmount：组件从页面删除时调用
• shouldComponentUpdate(nextProps, nextState): 可以通过这个方法控制组件是否重新渲染，如果返回false，组件就不会渲染。这个生命周期函数在React.js性能优化上非常有用。
• componentWillReceiveProps(nextProps): 组件从父组件接收到新的props时调用。
• componentWillUpdate: 组件开始重新渲染前调用
• componentDidUpdate: 组件重新渲染并且把更改变更到真实的dom以后调用。

class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>生命周期</h1>
      </div>
    )
  }
}

控制台输出：

image.png