react 组件实例更新之函数调用顺序

废话不多说  直接上代码

class InputTest extends Com{
	constructor(props){
		super(props);
		this.state = {
			value:""
		}
		this.onChangeHandle = this.onChangeHandle.bind(this);
	}
	onChangeHandle(e){
		this.setState({
			value:"okkkk!"
		});
		setTimeout(function(){
			console.log('settimeout called!');
		},0);
		console.log('onchangehandle called');
	}
	componentDidMount(){
		console.log('componentdidmount!');
	}
	componentDidUpdate(){
		console.log('componentdidupdata');
	}
	render(){
		console.log('render call');
		
		return (
			<div>
				<button type = "button" onClick={this.onChangeHandle} >click!</button>
				ok{this.state.value}
			</div>
		);
	}
	
}

打印顺序

组件实例加载完成后

控制台显示信息

render call   
componentdidmount!

先调用render函数，当组件加载完成后调用componentDidMount函数

当然我要说的问题不是这个而是，而是点击button按钮 调用函数之后onChangeHandle

控制台显示信息

onchangehandle called
 render call
 componentdidupdata
 settimeout called!

onChangeHandle函数调用 并调用了setState函数，然后函数会继续执行完毕，但是在onChangeHandle设置了一个定时器，此时定时器不会立即执行，而是会等到组件实例更新完毕之后再执行改定时器设置的函数。