1、setState为什么是异步的、什么时候是异步的?
setState本身的执行过程是同步的,只是因为在react的合成事件与钩子函数中执行顺序在更新之前,所以不能直接拿到更新后的值,形成了所谓的异步;
2、能不能同步,什么时候是同步的?
可以同步,在ajax、原生事件与setTimeout中是同步的
3、验证
代码中也包含了关于react批量更新优化的验证:
在合成事件与钩子函数中会对多次setState进行更新优化,只执行最后一次;
在原生事件与setTimeout内不会进行批量更新优化;
//测试setState同步与异步 //关于react的批量更新优化 //在react的合成事件函数与钩子函数中会进行批量更新优化 //多次调用setState只会调用最后一次 class App extends React.Component{ constructor(props){ super(props); this.state={ num:1 } } componentDidMount(){ this.clickFunc(); } //num增加 //合成事件、钩子函数内进行了批量更新优化 addNum(e){ console.log('react合成事件函数'); this.setState({num:this.state.num+1}); this.setState({num:this.state.num+1}); this.setState({num:this.state.num+1}); this.setState({num:this.state.num+1}); console.log(this.state.num); } //原生点击事件的处理函数 //原生事件与setTimeout中不会进行批量更新 clickFunc(){ document.querySelector('#btn').addEventListener('click',()=>{ console.log('原生事件处理函数开始'); this.setState({num:this.state.num+1}); console.log(this.state.num); this.setState({num:this.state.num+1}); console.log(this.state.num); this.setState({num:this.state.num+1}); console.log(this.state.num); this.setState({num:this.state.num+1}); console.log(this.state.num); console.log('原生事件处理完成'); }) } render(){ return( <div> <h1>{this.state.num}</h1> {/* react的合成事件 */} <button onClick={(e)=>{this.addNum(e)}}>React合成事件的按钮</button> {/* 原生DOM事件 */} <button id='btn'>绑定原生DOM事件的按钮</button> </div> ) } } ReactDom.render(<App/>,document.querySelector('#app'));
4、验证结果
点击React合成事件的按钮
点击绑定原生DOM事件的按钮