react的生命周期

1.组件的初始渲染（挂载，实例化）
getDefaultProps getInitialState componentWillMount render componentDidMount
2.组件的状态改变时（更新，状态改变引起的，存在期）
shouldComponentUpdate componentWillUpdate render componentDidUpdate
3.组件的属性改变（重新设置）时 （更新，属性改变引起的，存在期）
componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate
4.组件被从DOM中移除（卸载，销毁期）
componentWillUnmount

image.png
1.1getDefaultProps
getDefaultProps仅在ReactClass首次创建时调用一次，然后缓存起来。该函数返回一个对象，它代表的是组件上的this.props的默认状态。当你使用ES6创建组件时，默认属性会在你组件类的构造函数中完成；
1.2.getInitialState
该函数会返回一个对象，该对象的内容将在最初渲染时设置组件内部的初始状态。该函数仅在组件渲染前调用一次。当使用ES6类创建组件时，实际上你是在类的构造函数中通过this.state来设置状态；
1.3.componentWillMount
componentWillMount是生命周期事件，React在拿你的组件类渲染成DOM的过程中使用它。componentWillMount方法仅在你的组件初始渲染前执行。有一件要特别注意的事，如果你在该函数中调用你的setState函数，你的组件不会重新渲染，因为初始渲染方法会恢复被改变的状态
所以，记住不要试图在该生命周期函数里调用setState方法；
1.4render
每个React组件内都会有render函数，该函数会在每次渲染的时候执行，返回一个React元素；在之后的过程中，会根据React元素生成的虚拟DOM进行DOM操作；
思考一下，render都在哪些情况下执行；
1.5componentDidMount
该函数在组件被渲染成DOM节点后被调用。在这点上，React组件已成为DOM的一部分，此时你可以获取真实的DOM节点；
1.6componentWillReceiveProps
你可能从名字上理解为，该函数在组件将要接受属性时执行；其实，更准确的额说法是，在组件被变为React元素的过程就会执行，但是初始渲染的时候不会执行。
那也就是说当一个组件被元素化两次的时候会执行，那么第二次元素化时传递的props和有可能和第一次是一样的，那么此时我们就可以不用进行渲染。因此，componentWillReceiveProps会接收一个新的props（nextProps）作为参数，当然，我们在该周期函数中还是可以通过this.props访问之前的props，这个时候我们就可以把两次props进行对比，决定是否要更新组件

React.createClass({
    componentWillReceiveProps(nextProps){
        console.log(this.props) // 之前的属性
        console.log(next.props) // 新的props
}
})

当然，在后续流程中，nextProps会被更新成组件的this.props，如果我们在渲染中使用了{this.props.msg}，那么视图会被更新，但是很可能我们在渲染中仅仅使用了{this.state.msg}，而props的值仅仅是在getInitialState中才传给state的，那么这个时候，视图是不会更新的

第一种情况
let HelloWorld = React.createClass({
    render(){
    return <div>{this.props.msg}</div>
},
componentWillReceiveProps(nextProps){
    // …..
}
})

在这里，props发生改变，可以触发视图的更新；

let HelloWorld = React.createClass({
    render(){
    return <div>{this.state.msg}</div>
},
getinitialState(){
    return {
    msg:this.props.msg
}
},
componentWillReceiveProps(nextProps){
    // …..
}
})

上述情况，当接收到新的props的时候，视图是不会更新的，但是componentWillReceiveProps会执行，并且也能接收到新的props；这种情况下，要让视图更新，应该调用我们的setState方法；所以，在componentWillReceiveProps中是可以调用setState方法的，那么看看如何改写它内部的逻辑

componentWillReceiveProps(nextProps){
    this.setState({msg:nextProps.msg});
}

1.73.7.shouldComponentUpdate
该周期函数发生在视图将要更新前，并且可以让我们自己决定视图是否要真的更新，在初次渲染的时候，不会调用该函数；我们可以通过在该函数的末尾返回布尔类型的值来决定是否需要重新渲染，如果返回true，那就正常渲染，如果返回false，那么就不渲染并且会，直接跳过render,componentWillUpdate以及componentDidUpdate阶段；

并且该周期函数会接收 新的属性(nextProps)和新的状态(nextState)作为参数;
1.8.componentWillUpdate
该函数在你的组件一出现渲染的时候就会被调用。你无法在该函数中使用setState。该函数也会接收新的属性和状态作为参数

1.9.componentDidUpdate
该函数仅在DOM的所有渲染更新被处理完后被执行。因为此时已经是变更后的状态了，所以在该函数内部访问的this.props和this.state是新的属性和状态，该函数会接收上一次的属性和状态作为参数；
1.10.componentWillUnmount
销毁期；