# 一、什么是生命周期
- 组件本质是状态机，输入确定，输出一定确定
- 一个
state对应一个render，状态转换的时候会触发不同的函数，从而让开发者有机会做出响应，可以用事件的思路理解状态，但是事件与事件之间没有关联，而状态与状态之间可能会有关联
# 二、初始化阶段
设置初始的属性与状态
getDefaultProps：设置初始的属性，只在第一次调用，实例之间共享引用getInitialState：设置初始的状态componentWillMount：组件将要加载，render之前最后一次修改状态的机会render：只能访问this.props与this.state，只有一个顶层标签（组件），不允许修改状态和DOM输出componentDidMount：成功render并渲染完成真实DOM之后出发，可以修改DOM，要操作DOM也必须在这个阶段完成
var Demo = React.createClass({
// 第一步执行顺序：设置初始的属性，指执行一次
getDefaultProps:function(){
return {
name:'一个盒子',
title:'box'
}
},
// 第二步执行顺序：设置初始的状态
getInitialState:function(){
return {
sss: this.props.name
}
},
// 第三步执行：组件将要加载的时候，最后一次可以修改状态的机会
componentWillMount:function(){
this.setState({
sss:'修改状态'
})
// alert('componentWillMount')
// 这里是没有办法获取到这个节点的
// var box = this.refs.box;
// alert(box.clientWidth)
},
// 第四步：render渲染
render:function(){
// console.log(this)
var styles = {
position:'absolute',
width: '100px',
height: '100px',
color: 'red',
background: 'lime'
}
return <div ref="box" style={styles}>{this.props.title}{this.state.sss}</div>
},
// 第五步：组件加载完成，只有在这一个阶段，我们才可以操作DOM节点
componentDidMount:function(){
// alert('componentDidMount')
// 下面的this指向组件
console.log(this)
var box = this.refs.box;
var timer = null;
var n = 
