前端面试题（一）:（React）setState为什么异步？能不能同步？什么时候异步？什么时候同步？

最新推荐文章于 2024-06-06 13:34:20 发布

用户名加载中......

最新推荐文章于 2024-06-06 13:34:20 发布

阅读量5.1k

点赞数 3

分类专栏：前端面试题文章标签： react setState同步异步

本文链接：https://blog.csdn.net/qq_39989929/article/details/94041143

版权

本文探讨了React中setState的异步性质，详细解释了setState在何时表现为异步，以及在哪些情况下可以同步执行。通过实例验证了在合成事件与钩子函数中的批量更新优化，并对比了原生事件与setTimeout中的同步行为。

摘要由CSDN通过智能技术生成

1、setState为什么是异步的、什么时候是异步的？

setState本身的执行过程是同步的，只是因为在react的合成事件与钩子函数中执行顺序在更新之前，所以不能直接拿到更新后的值，形成了所谓的异步；

2、能不能同步，什么时候是同步的？

可以同步，在原生事件与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