React 中 setState同步异步

最新推荐文章于 2024-04-09 16:59:47 发布

阿奎666

最新推荐文章于 2024-04-09 16:59:47 发布

阅读量251

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/thickhair_cxy/article/details/108947338

版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文详细探讨了React中setState的行为，包括同步更新和异步更新的场景，解释了何时setState会立即更新组件状态，以及何时会被批量处理。通过实例分析，帮助开发者更好地理解和掌握React组件状态的管理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  setState可以同步也可以异步，主要看应用的场景
    异步:
    1. react 本身的事件 就是写在标签上面的事件，列如：onClick,onKeyDown,onChange
    2. 在 生命周期里 setState 都是异步的
    
    同步:
    4. 自己注册的事件
    5. setTimetou setTimeInteval
    6. ajax 回调里
 
   componentDidMount(){
        第一个
        document.body.addEventListener("click",()=>{
            this.setState({
                name:"阿奎"
            })
            console.log(this.state.name)
        })
 
        第二个
        setTimeout(()=>{
            this.setState({
                name:"奎哥真帅"
            })
        },1000)
 
        第三个
        axios.get("https://api.baxiaobu.com/index.php/home/v5/getuser")
        .then(res=>{
            this.setState({
                name:"加油奥利给"
            })
            console.log(this.state.name)
        })
        
    }
    
   setState改变值
        //第一种改变值
         this.setState((state,props)=>{//state是旧值
            return{
                age:state.age+1
            }
        },()=>{
            console.log(1111,this.state.age)
        })
 
        //第二种改变值，并且获取新值
        this.setState({
            name:"詹姆斯"
        },()=>{
            console.log(this.state.name)
        })