一共有四个声明周期init（初始化），mount（装载），update（更新），unmount（卸载）。只有更新可能会执行多次，其余都只执行1次。
init
getDefaultProps（生成默认属性）：在创建类的时候，React.createclass时指定。是一个共有的，所有的实例都会使用，是针对类而言的，只会调用一次。
getInitialState（初始化state）：ES6时在构造函数中指定。getInitialState针对具体的实例，每个实例生成时都会调用一次。
const Item = React.createClass({
getDefaultProps () {
console.log('getDefaultProps')
return {
'group': 'javascript'
}
},
getInitialState () {
console.log('getInitialState')
return {
'name': 'cc'
}
},
render () {
return <div>{this.state.name + this.props.group}</div>
}
})
ReactDOM.render(
<div>
<Item />
</div>, document.getElementById('root'))
执行的先后顺序。当调用多个item时：
ReactDOM.render(
<div>
<Item />
<Item />
<Item />
</div>, document.getElementById('root'))
调用了一次getDefaultProps，三次getInitialState。
mount组件装载阶段：包含预加载、渲染和加载完毕三个周期，都只执行一次。预加载时dom未成形，不能操作dom。
class Item extends React.Component {
constructor (props) {
super(props)
console.log('getInitialState')
this.state = {
'group': 'hello'
}
}
static get defaultProps () {
console.log('defaultProps')
return {
'name': 'cc'
}
}
componentWillMount () {
console.log('componentWillMount')
this.state.name = 'cc'
}
componentDidMount () {
console.log('componentDidMount')
}
render () {
console.log('render')
return <div>{this.state.group + this.props.name}</div>
}
}
打印顺序如下图
componentWillMount(预加载)，可以操作组件的state，不能操作DOM。
componentDidMount（加载完毕），这时可以操作DOM，也可以再此处引入一些外部交互，比如发送请求，与其他框架交互。
render(渲染)，初次渲染，没什么好说的。
Update：只在组件更新时会触发，初次加载时不会触发。
把上面的代码页面渲染部分封装为render方法：
const Item = React.createClass({
getDefaultProps () {
console.log('getDefaultProps')
return {
'group': 'javascript'
}
},
getInitialState () {
console.log('getInitialState')
return {
'name': 'cc'
}
},
componentWillMount () {
console.log('componentWillMount')
this.state.name = 'cc'
},
componentDidMount () {
console.log('componentDidMount')
},
render () {
console.log('render')
return <div>{this.state.group + this.props.name}</div>
},
componentWillUpdate (nextProps, nextState) {
console.log('component will update')
},
componentDidUpdate (oldProps, oldState) {
console.log('compontent did update')
}
})
ReactDOM.render(
<div>
<Item />
</div>, document.getElementById('root'))
初次加载没有触发update，触发update有三种方式，外部渲染（如本例中演示），内部state变化，外部传入参数。当我们页面的render方法包装下。
function render () {
ReactDOM.render(
<div>
<Item />
</div>, document.getElementById('root'))
}
render() //调用两次render
render()
触发了update，而且每次还会自动调用render。
componentWillUpdate（nextProps，nextState）：组件预更新，接受两个参数，新的组件props和新的状态state；
为了防止组件频繁刷新，还有一个组件的更新验证方法shouldComponentUpdate，用于控制组件是否需要更新状态。
特殊方法： shouldComponentUpdate (nextProps, nextState) {
return false//返回false，则组件不会被update
}
组件加入shouldComponentUpdate 后没有被update。
特殊方法：componentWillReceiveProps(nextProps)已加载组件收到新的参数时调用。componentWillReceiveProps()
当一个组件收到新的props时被调用。如果需要改变状态来响应props的改变可以先比较传入的props和当前的props，再在此方法内调用setState（）来改变state。React可能会调用这个方法，即使props没有改变，所以在处理变化时必须在方法内比较当前值和新的值props。这个可能会因为父元素的变化导致子元素重新渲染。在组件加载过程中不会调用此方法。只有传入新的props时才会调用，同样setState也不会触发此方法。（以上翻自react官网说明）。
unmount卸载阶段
componentWillUnmount
在组件被卸载和摧毁前被立即调用。清理应该放在这里。
比如说我在组件的加载时写了个setInterval定时器，在路由router跳转后，我们应该要clearInterval这个定时器，不然是很耗性能的，包括我们的全局事件绑定，都需要在这里取消。
.
