周期函数定义引用自官方(以下函数的顺序顺序即生命周期函数的执行顺序)

• componentWillMount 在渲染前调用,在客户端也在服务端。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

例子如下

import React from "react";
class Zb extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      desName: "CoderZb",
    };
  }
  componentWillMount() {
    console.log("componentWillMount执行");
  }
  componentDidMount() {
    console.log("componentDidMount执行");
  }
  componentWillReceiveProps(newProps) {
    console.log("componentWillReceiveProps执行---",newProps);
  }
  shouldComponentUpdate(newProps, newState) {
    console.log("shouldComponentUpdate执行---",newProps,'~~~~',newState);
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate执行---",nextProps,'~~~~',nextState);
  }
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate执行---",prevProps,'~~~~',prevState);
  }
  componentWillUnmount() {
    console.log("componentWillUnmount执行");
  }

  render() {
    return (<div>
      <div onClick={() => this.btnClick()}>{this.state.desName}</div>
      </div>
      );
  }
  btnClick(){
    this.setState({
      desName:'jianshu'
    })
  }
}
export default Zb;

效果如下

• 默认加载时打印如下结果

  
  image.png

• 点击CoderZb时，内容变为jianshu，并打印如下内容
  

  image.png

• 离开当前页面时，打印如下内容

  
  image.png

对于componentWillReceiveProps函数的执行，后续会单独写一篇文章来介绍