在组件的整个生命周期中，随着该组件的 props 或者 state 发生变化，其 dom 变现也会相应变化。一个组件就是一个状态机，对于特定输入，总会返回一致的输出。
一个 React 组件的生命周期分为三部分：实例化、存在期和销毁时。
1.实例化
组件在 X 被实例化，第一次被创建时：
生命周期.png
① getDefaultProps
- 该方法只会被调用一次。返回的对象可以用于设置默认的 props 值。
var Hello = React.creatClass({
getDefaultProps: function() {
return {
name: 'pony',
git: 'dwqs'
}
}
})
- 挂载组件的时候设置props
var data = [{title: 'Hello'}];
<Hello data={data} />
- 调用 setProps 来设置 props （不常用）【只能子组件或组件树调用，不能this.setProps 或 this.props 。使用 Hello.setProps({})】
- propTypes 用来验证 props，是一个配置对象，用于定义属性类型：【初始化时，如传递的属性和 propTypes 不匹配，则打印 warn 日志。如果是可选配置，则可以去掉 isRequired】
var survey = React.createClass({
propTypes: {
survey: React.propTypes.shape ({
id: React.propTypes.number.isRequired
}).isRequired,
onClick: React.PropTypes.func,
name: React.PropTypes.string,
score: React.PropTypes.array
...
}
})
② getInitialState
- 该方法的调用有且只有一次，用于初始化每个实例的state，可以访问组件的 props。【state 只存在组件的内部，props 在所有实例中共享】
- 每次修改 state，都会重新渲染组件：
a.shouldComponentUpdate
b. componentWillUpdate
c. render
d. componentDidUpdate - getDefaultProps： 对于组件类只调用一次，后续该类的应用都不会被调用
getInitialState： 对于每个组件实例都会调用一次，并且只调一次
③ componentWillMount
- 该方法在首次渲染之前调用，【是 render 方法调用之前修改 state 的最后一次机会。】
④ render
- 只能通过 this.props 和 this.state 访问数据（不能修改）
- 可以返回 null,false 或者任何 React 组件
- 只能出现一个顶级组件，不能返回一组元素
- 不能该表组件的状态
- 不能修改 DOM 的输出
⑤ componentDidMount
- 该方法不会在服务器渲染的过程中被调用。可以在该方法中通过 this.getDOMNode() 访问到真实 DOM（推荐 ReactDOM.findDOMNode()）
- 由于组件是虚拟 DOM，从组件获取真实 DOM 的节点，需要用到 ref 属性。【this.refs.[refName] 属性获取的是真实 DOM，所以必须等到虚拟 DOM 插入文档后，才可以使用这个属性，否则报错】
2.存在期
此时组件已经渲染好并且用户可以与其交互（鼠标点击、手指点按...），导致应用状态改变，将如下顺序被调用。
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDIdUpdate
① componentWillReceiveProps
- 父组件修改 props 属性时，componentWillReceiveProps 将被调用。可以在方法中更新 state ，来触发 render 方法重新渲染。
② shouldComponentUpdate
- 通过在该方法中返回 false 来阻止组件渲染。返回 false 时，将不再继续向下执行。
③ componentWillUpdate
- 重新渲染前，componentWillUpdate( object nextProps, object nextState )会被调用。【不要在该方法中再去更新 props 或者 state】
④ componentDidUpdate
- 组件重新渲染之后，componentDidUpdate( object prevProps, object prevState )会被调用。可以在这里访问并修改 DOM。
3.销毁时
① componentWillUnmount
- React 使用完一个组件时，该方法被执行，完成清理和销毁工作。在 componentDidMount 中添加的任务需要在此撤销。
- 当再次装载组件时，以下方法被调用：
a. getInitialState
b. componentWillMount
c. render
d. componentDidMount
总结
总结.png
