React生命周期

初始化数据：

加载前执行构造函数：constructor

正要加载时执行：componentWillMount （异步的方法可以放在这里）

把dom渲染出来：render

渲染完成执行：componentDidMount

更新数据之后：

将要接收父组件传来的props执行： componentWillReceiveProps

子组件是否要更新： shouldComponentUpdate（true和false）

当为true时，组件将要更新：componentWillUpdate

把dom渲染出来：render

渲染完成执行：componentDidMount

当shouldComponentUpdate为false时，后面的方法将不再执行

销毁props数据时调用：componentWillUnmount

 

实例代码：

class Component extends React.Component{
	constructor(props){
		super(props)
		this.state={
			data:'react'
		}
		console.log('初始化数据:','constructor')
	}
	//加载之前
	componentWillMount(){
		console.log('componentWillMount')
	}
	//加载完成
	componentDidMount(){
		console.log('componentDidMount')
	}
	//销毁时调用
	componentWillUnmount(){
		console.log('componentWillUnmount')
	}
	
	//处理点击事件
	hanldeClick(){
		console.log('这里是更新数据：')
		this.setState({
			data:'new react'
		});
	}	
		
	//将要接收父组件传来的props
	componentWillReceiveProps(){
		console.log('componentWillReceiveProps')
	}
	//子组件是不是应该更新
	shouldComponentUpdate(){
		console.log('shouldComponentUpdate')
		return true;
	}
	//当为true时，组件将要更新
	componentWillUpdate(){
		console.log('componentWillUpdate')
	}
	//组件更新完成
	componentDidUpdate(){
		console.log('componentDidUpdate')
	}
	render(){
		console.log('render')
		return(
			<div>
				<div>Props:{this.props.data}</div>
				<button onClick={()=>{this.hanldeClick()}}>点击</button>
			</div>
		)
	}
}

class App extends React.Component{
	constructor(props){
		super(props)
		this.state={
			data:'react',
			hasChild:true
		}
	}
	
	onPropsChange(){
		console.log('这里是更新数据：')
		this.setState({
			data:'new react'
		})
	}
	
	onDestoryChild(){
		console.log('销毁子组件数据：')
		this.setState({
			hasChild:false
		})
	}
	
	render(){
		return(
			<div>
				{
					this.state.hasChild?<Component data={this.state.data}/>:null
				}
				<button onClick={()=>{this.onPropsChange()}}>更新props</button>
				<button onClick={()=>{this.onDestoryChild()}}>销毁子组件props</button>
			</div>
		)
	}
}

ReactDOM.render(
	<App/>,
	document.getElementById('app')
);