组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

componentWillMount 

在渲染前调用,在客户端也在服务端。一般用的比较少，更多的是用在服务端渲染

1、组件刚经历constructor,初始完数据
2、组件还未进入render，组件还未渲染完成，dom还未渲染

componentDidMount 

在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

componentWillReceiveProps 

在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 

返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
可以在你确认不需要更新组件时使用。

componentWillUpdate

在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate

 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount

在组件从 DOM 中移除之前立刻被调用。

class Demo extends Component {
  	constructor(props, context) {
      	    //如果想(在组件其他地方是可以直接接收的)使用props或context，则需要以参数形式传入。
      	    //只要组件存在constructor,就必要要写super,否则this指向会错误
      	    super(props, context);
      	    this.state = {
          	    data: 1
      	    };
  	},
	componentWillMount () {
		// 在组件挂载之前调用，且全局只调用一次。如果在这个钩子里可以setState，render后可以看到更新后的state，不会触发重复渲染。
		// 该生命周期可以发起异步请求，并setState。（React v16.3后废弃该生命周期，可以在constructor中完成设置state）
		// 不推荐在这里发起ajax请求，若返回数据为空，则容易造成界面空白，影响渲染效果
	},
	componentDidMount () {
		//组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
	},
	componentWillReceiveProps (nextProps) {
		// 在接受父组件改变后的props需要重新渲染组件时用到的比较多
		// 通过对比nextProps和this.props，将nextProps setState为当前组件的state，从而重新渲染组件
		nextProps.data !== this.props.data && this.setState({
	        data: nextProps.data
		    }，() => {
		      console.log("new data...");
	  	});

	},
	shouldComponentUpdate (nextProps, nextState) {
		// react性能优化非常重要的一环。
		// 组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，
		// 如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，
		// 这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。
	},
	componentWillUpdate (nextProps, nextState) {
		// 组件初始化时不调用，只有在组件发生更新需要重新渲染时才调用
	},
	componentDidUpdate (prevProps, prevState) {
		// 组件初始化时不调用，组件更新渲染完成后调用，此时dom节点加载完成，可以获取到dom节点。
		// react只会在第一次初始化成功会进入componentDidmount，
		// 之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
		// 该钩子内setState有可能会触发重复渲染，需要谨慎判断，否则会进入死循环 
	},
	render () {
	    return (
	        <div>This is Demo！</div>
	    );
	},
	componentWillUnmount () {
		// 组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
	},
	componentDidCatch (error, info) {
    	//React 16 中引入，用来 捕获组件的错误。
    	//如果 render() 函数抛出错误，则会触发该函数。
    	//错误在渲染阶段中被捕获，但在事件处理程序中不会被捕获。
    }
}

TIPS: 在生命周期中的哪一步你应该发起 AJAX 请求？

我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下：

• React 可能会多次频繁调用 componentWillMount，如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。

• 如果我们将 AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。