React生命周期

getDefaultpropse

    设置props的默认数据

getInitialState

初始化每个实例的state，在这个方法里可以访问组件的props,每一个React组件都有自己的state与其props的区别在于state只存在组件的内部，props在所有实例中共享

初始化组件 state 数据，但是在 es6 的语法中，我们可以使用以下书写方式代替

        constructor(props, context) {            super(props, context); // 初始化组件 state 数据             this.state = { name:zhangsan }            }}

getInitialState 和 getDefaultPops 的调用是有区别的， getDefaultPops 是对于组件类来说只调用一次，后续该类的应用都不会被调用，而 getInitialState 是对于每个组件实例来讲都会调用，并且只调一次。

componentWillMount

当组件即将渲染的时候触发这个函数，也就是render方法调用之前修改state的最后一次机会，修改state用this.setState({ })的方法

componentDidMount

组件渲染完成后触发这个函数，该方法被调用时，已经渲染出了真实的DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

组件第一次加载时渲染完成的事件，一般在此获取网络数据。实际开始项目开发时，会经常用到。

组件获取真实的DOM节点，要用到 ref 属性：

var ClickComponent = React.createClass({            handleClick:function(){                //获取节点                var tipE = this.refs.tip                if(tipE.style.display=='block'){                    tipE.style.display = "none";                }else{                    tipE.style.display = "block";                }            },            render:function(){                return(                    <div>                        <button onClick = {this.handleClick}>出现|隐藏</button>                        <p ref="tip" style={{'display':'block'}}>这是一个p标签</p>                    </div>                )            }        })

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

componentWillUpdate

当组件发生改变的时候触发这个函数（在组件接收到新的props或者state但还没有render的时候被调用，初始化时不会调用）

componentDidUpdate

当组件完成更新后立即调用，初始化时不会被调用

组件更新了之后触发的事件，一般用于清空并更新数据。实际开始项目开发时，会经常用到

componentWillUnmount

组件在DOM中被移除的时候立刻调用

组件在销毁之前触发的事件，一般用户存储一些特殊信息，以及清理setTimeout事件等

componentWillReceiveProps

组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。(props改变之前)

componentWillReceiveProps: function(nextProps){    if(nextProps.checked !== undefined){        this.setState({            checked: nextProps.checked        })    }}

shouldComponentUpdate

如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

shouldComponentUpdate: function(nextProps, nextState){    return this.state.checked === nextState.checked;    //return false 则不更新组件}