React组件的生命周期

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

实例化
当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：
1、getDefaultProps（对于组件类来说只会调用一次然后缓存起来，在多个类实例之间共享，返回的对象可设置默认的props）
2、getInitialState（每个组件都有且只有一次调用，刚好是mounting阶段开始之前，用来初始化实例的state，可以访问组件的props）
每个组件都有自己的state，state只存在组件内部，而props在所有实例中共享
3、componentWillMount（首次渲染之前调用，React在dom插入组件之前，render调用之前修改state的最后一次机会）
4、render（创建一个虚拟dom，表示组件的输出。对于组件来说是唯一一个必需的方法。render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM
tree的结构的对象。react之所以效率高，就是这个原因。）
（render需要满足：
0.只能通过

this.props
和
this.state
访问数据（不能修改）
0.可以返回

null,false

或者任何React组件
0.只能出现一个顶级组件，不能返回一组元素
0.不能改变组件的状态
0.不能修改DOM的输出）
5、componentDidMount（该方法被调用时，已经渲染出真实的dom，可以再该方法中通过 this.getDOMNode()访问到真实的

DOM(推荐使用 ReactDOM.findDOMNode())。组件并不是真实的dom节点，而是存在于内存中的一种数据结构（虚拟dom），只有插入文档后才会变成真实的dom。从组件中获取真实dom节点需要使用ref）

每次修改

state，都会重新渲染组件，实例化后通过

state
更新组件，会依次调用下列方法：
1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate
但是不要直接修改

this.state，要通过

this.setState
方法来修改。

存在期
此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用
1、componentWillReceiveProps（组件的props属性可以通过父组件来更改时调用，可以在这个方法里更新

state,以触发

render
方法重新渲染组件。提供了在render之前修改state的机会）
2、shouldComponentUpdate（如果你确定组件的

props
或者
state
的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回

`false
则不会执行
render
以及后面的
componentWillUpdate，componentDidUpdate

方法。）
3、componentWillUpdate（这个方法和

componentWillMount
类似，在组件接收到了新的
props
或者
state
即将进行重新渲染前，componentWillUpdate(object
nextProps,

object nextState)

会被调用，注意不要在此方面里再去更新
props
或者
state。）
4、render
5、componentDidUpdate（这个方法和

componentDidMount
类似，在组件重新被渲染之后，componentDidUpdate(object
prevProps,

object prevState)

会被调用。可以在这里访问并修改
DOM。）

销毁时
componentWillUnmount（每当React使用完一个组件，这个组件必须从

DOM
中卸载后被销毁，此时
componentWillUnmout
会被执行，完成所有的清理和销毁工作，在
componentDidMount
中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。）

当再次装载组件时，以下方法会被依次调用：
1、getInitialState
2、componentWillMount
3、render
4、componentDidMount