首先看下react官网的生命周期图解

实例：时钟封装

class Clock extends React.Component {  constructor(props) {    //添加一个构造函数内部调用props。    //初始state    super(props);    this.state = {date: new Date()};  }    componentWillMount () {    //钩子：组件将要挂载    //1、组件刚经历constructor,初始完数据    //2、组件还未进入render，组件还未渲染完成，dom还未渲染    //3、componentWillMount 一般用的比较少，更多的是用在服务端渲染  }  componentDidMount() {    //当组件输出到 DOM 后会执行 componentDidMount() 钩子    //组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染    //1、添加事件addEventListener    //2、调用ajax请求    this.timerID = setInterval(      () => this.tick(),      1000    );  }    componentWillReceiveProps (nextProps) {    //componentWillReceiveProps在接受父组件改变后的props需要重新渲染组件时用到的比较多    //通过对比nextProps和this.props，将nextProps setState为当前组件的state，从而重新渲染组件  }    shouldComponentUpdate (nextProps,nextState) {    return this.state.date !== nextState.date;    //唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，    // （暂时这么理解，其实setState以后有些情况并不会重新渲染，比如数组引用不变）在这里return false可以阻止组件的更新  }    componentWillUpdate (nextProps,nextState) {    //shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState      }  tick() {    this.setState({      date: new Date()    });  }  render() {    //render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，    // 在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染        return (      
    
        
     
Hello, world!
        
     
It is {this.state.date.toLocaleTimeString()}.
      
    
    );  }    componentDidUpdate (prevProps,prevState) {    //组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,    //之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。  }  componentWillUnmount() {    ///销毁钩子：完成所有的清理和销毁工作    //1、clear你在组建中所有的setTimeout,setInterval    //2、移除所有的监听 removeEventListener    clearInterval(this.timerID);  }}ReactDOM.render(  
    ,  document.getElementById('root'));复制代码

定义：

1、每当Clock组件第一次加载到DOM中的时候，生成定时器，这在React中被称为挂载

2、同样，每当Clock生成的这个DOM被移除的时候，清除定时器，这在React中被称为卸载。

这些方法被称作生命周期钩子

注意