setState（API）的异步和同步问题

时间：2021-06-28 20:59:36 收藏：0 阅读：0

在react中，想要改变state内部状态，需要使用setState进行修改，如果只是修改state的部分属性，则不会影响其他的属性，这个只是合并并不是覆盖。

this.setState()，该方法接收两种参数：对象或函数（理解对象形式是函数形式的简写）。

对象：this.setState({key:value})。
函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是state改变后触发的回调

在此还需要注意的是，setState有异步更新和同步更新两种形式，那么什么时候会同步更新，什么时候会异步更新呢？

React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。

大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。

总结：setState同步异步和调用环境，上下文有关。

import React,{Component,createRef} from "react";



class SetStateAsync extends Component {
    state = {
        num:0
    }

    btnRef = createRef();
    //更新状态的两种方式：
    

    //1、对象形式
    addNum = (params)=>{
        console.log(params);
        this.setState({
            num:this.state.num+1
        })
    }

    //2、函数形式

    // addNum = (params)=>{
    //     console.log(params);
    //     this.setState((state,props)=>{
    //         console.log(state,props,"什么参数！！！");
    //         return {
    //             num:this.state.num + 1
    //         }
    //     },()=>{
    //         //获取异步的最新修改state的值。
    //         console.log(this.state.num);
    //     })
    // }



    //问题：setState(API)同步异步问题！！！

    /*
        通过react控制的调用是异步的。
        react控制：即react二次封装的事件。


        通过原生调用setState是同步的。
        同步如下：
    */

    componentDidMount(){
        this.btnRef.current.addEventListener("click",()=>{
            console.log("原生方法执行了！！！！");
            this.setState({
                num:this.state.num+1
            });
　　　　　　　
            console.log(this.state.num,"同步的setState更新状态!!!");
        })

    }



    render(){
        return (
            <>
                <p>同步异步更新state状态</p>
                <p>数量：{this.state.num}</p>
                <button ref={this.btnRef} onClick={()=>this.addNum("改变num数量！！！")} className=‘btn‘>点我+1</button>
            </>
        )
        
    }
}

export default SetStateAsync;