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')
	    },
        // 该钩子函数表示当父组件的props入参改变时调用，常用于父组件入参变化影响子组件渲染
	    componentWillReceiveProps:function(newProps) {
	        console.log('componentWillReceiveProps')
	    },
	    shouldComponentUpdate:function(newProps, newState) {
	        return true; //当该值设为false的时候，不会更新组件，即componentWillUpdate和componentDidUpdate不会被执行
	    },
	    componentWillUpdate:function(nextProps, currentState) {
	        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>

运行结果：点击前

 

点击后：