react系列（6）组件生命周期钩子函数

“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。

React 组件生命周期：

componentWillMount ：在渲染前调用,在客户端也在服务端。

componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。

componentWillReceiveProps：在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使

forceUpdate时不被调用，可以在你确认不需要更新组件时使用。

componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate：在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。

<script type="text/babel">
//组件生命周期Demo
var LiftDemo = React.createClass({
getInitialState:function(){
return {num:0};
},
setNum:function(){
this.setState({num:this.state.num+1});
},
render:function(){
return (
<div>
<button onClick={this.setNum}>click</button>
<Content name={this.state.num}></Content>
</div>
);
}
});

var Content = React.createClass({
componentWillMount:function() {
console.log('componentWillMount')
},
componentDidMount:function() {
console.log('componentDidMount')
},
componentWillReceiveProps:function(newProps) {
console.log('componentWillReceiveProps')
},
shouldComponentUpdate:function(newProps, newState) {
return true; //当该值设为false的时候，不会更新组件，即componentWillUpdate和componentDidUpdate不会被执行
},
componentWillUpdate:function(nextProps, nextState) {
console.log('componentWillUpdate');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('componentDidUpdate')
},
componentWillUnmount:function() {
console.log('componentWillUnmount')
},
render:function(){
return (<h1>{this.props.name}</h1>);
}
});

ReactDOM.render(
<LiftDemo />,
document.getElementById("example")
);
</script>

运行结果：点击前



点击后：