156-react生命周期

react生命周期

两个生命周期方法
初始化和销毁
componentDidMount
componentWillUnmount


来个例子

class Hello extends React.Component{

constructor(props){
super(props);
}

componentDidMount(){
}

componentWillUnmount(){
}

}




来个具体例子
<script type="text/babel">

class Hello extends React.Component{

constructor(props){
	super(props);
}

componentDidMount(){
console.log('componentDidMount');
}

componentWillUnmount(){
console.log('componentWillUnmount');
}

	render(){
	return(
	<p> hello world </p>
	)
	}
}

ReactDOM.render(<Hello />, document.getElementById('root'));

setTimeout(function(){
ReactDOM.render(<h1>hello</h1>, document.getElementById('root'));
},2000);

</script>



我们设置一个setTimeout
然后再次调用render
但是换一个组件
那么上一个组件就被销毁了
就会调用销毁的生命周期方法




axios使用
1.url 请求地址
2.method
3.responsetype
4.params
5.then
6.catch




constructor(props){
	super(props);
	this.state={
	aList: [],
	sText: ''
	}
}

//构造函数后进行数据的初始化
componentDidMount(){
axios({
	url: './js/data.json',
	method: 'get',
	responseType: 'json',
	
}).then(
	(data)=>{
	this.setState({aList:data.data})
	}
).catch(function(){
	alert('error');
})

}







componentDidMount(){
Promise.all([oPro1,oPro2])
	.then(

	console.log(data);

	(data)=>{
	this.setState({aList:[data[]]})	
	}
)
	.catch(function(err){
	console.log('error');
});
}