经测试,setTimeout中setState也是异步了

经测试,setTimeout中setState也是异步了

老师您好,

1、我使用的React版本是18.2

https://img1.sycdn.imooc.com/climg/65e056b7096a352504730373.jpg

2、setTimeout中使用setState的代码:

    addClick(){
        // 1、异步
        // this.setState({
        //     count: this.state.count + 1

                // }, () => {
        //     console.log('count by callback', this.state.count);
        // });
        // console.log('count', this.state.count);

        // 2、setTimeout中setState是同步的吗? - 测试是异步了
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log('count in setTimeout', this.state.count);
        }, 0);
    }

结果:打印的结果并不是页面最新的渲染结果

https://img1.sycdn.imooc.com/climg/65e0573509842ae708770334.jpg

3、自定义DOM事件使用setState的代码:

    bodyClickHandler(){
        this.setState({
            count: this.state.count + 1
        })
        console.log('count in body event', this.state.count);
    }
    componentDidMount(){
        document.body.addEventListener('click', this.bodyClickHandler);
    }
    componentWillUnmount(){
        document.body.removeEventListener('click',this.bodyClickHandler);
    }

结果:

https://img1.sycdn.imooc.com/climg/65e0595b09c1268f08810342.jpg

是不是老版本React中是setState可能有异步和同步的情况,新版本全是异步了?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
向学习者学习 2024-06-03 22:54:13

学到了,

好帮手慕久久 2024-03-01 09:20:05

同学你好,是的。新版本的setState都是异步的。同学根据测试结果,特殊记忆一下就行。

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师