React--生命周期

React生命周期是使用React开发中非常重要的一环。概括来说React的生命周期分为三个阶段： Mounting、Updating、Unmounting

Mounting 阶段出发的方法有：
constructor()
componentWillMount()
render()
componentDidMount()

Updating阶段出发的方法有：
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

Unmounting阶段触发的方法
componentWillUnmount()

现在逐一说一下每个方法的用法

constructor() 

构造函数用来初始化state和props，组件创建的时候调用一次。

componentWillMount()

见名知意，组件将要挂载，在组件挂载之前调用，此方法还能修改state（调用setState方法）

render()

必选的方法 ，创建虚拟的DOM，该方法中有两点需要特别注意：
1、不能修改state
2、返回的组件中只能有一个顶级组件

componentDidMount()

真是的DOM被渲染后调用，所以可以在该方法中获取真实的DOM节点，可以用refs获取DOM节点

componentWillReceiveProps()

组件接收到新的props时调用；父组件发生render()的时候也会调用（不管props有没有更新）。该方法中可以修改state和props

shouldComponentUpdate()

组件是否可以更新。返回一个Boolean值，默认为true。如果返回false则不会触发组件的更新。每次setState都会触发该方法，但是有些时候数据的变化并不需要重新渲染组件，所以可以在这个方法中做判断来决定是否要更新组件（返回true或false）

componentWillUpdate()

组件将要更新。可以和componentWillMount()对应起来，该方法中不可以修改state或props，否则又会循环到之前的生命周期方法中。调用forceUpdate()方法也会触发该方法。

componentDidUpdate()

组件完成更新后调用。可以方法DOM元素，可以和componentDidMount()对应起来

componentWillUnmount()

组件将要销毁前调用，一般做一些清理工作，一般在componentDidMount注册的事件可以在该方法中删除。比如创建的计时器和事件监听器。

我本人总结了一个生命周期的流程图，大家参考：