react 中的 setState 的异步执行

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

react 中的 setState 的异步执行

setState()方法通过一个队列机制实现state更新，当执行setState()的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state(可以和浏览器的事件队列类比)。

 react 中的 setSate 方法是异步的，它的写法有两种形式：

1、参数为一个对象

this.setState({
    love: '甜甜',
    foot: '火锅、串串'
})

2、参数为一个方法

this.setState(()=>{
    return {
        love: '甜甜',
        foot: '火锅、串串'
    }
})

3、异步执行

class Test extends Component{

    state = {
        isLove: true
    }

    handleClick=()=>{

        this.setState(()=>{
            console.log('内部:', this.state.isLove)
            return {
                isLove: !this.state.isLove
            }
        })

        console.log('外部:', this.state.isLove)
    }

    render(){
        return(
            <div>
                <span onClick={this.handleClick}>
                {this.state.isLove ? 'love' : 'like'}
            </div>
        )
    }

}

// 控制台的输出应该是,先输出外部的在输出内部的
// console.log('外部:', true)
// console.log('内部:', true)

4、改进

class Test extends Component{

    state = {
        isLove: true
    }

    handleClick=()=>{

        this.setState((prevState)=>{
            // prevState 这个参数为上一个的state
            console.log(prevState)
            return {
                // 这样写保证每一次点击触发改变的都是将上一次的状态参数改变，获取最新的参数
                isLove: !prevState.isLove
            }
        })

    }

    render(){
        return(
            <div>
                <span onClick={this.handleClick}>
                {this.state.isLove ? 'love' : 'like'}
            </div>
        )
    }

}

5、由于是异步的，如果想获取到最新的state，应该通过回调的方式

class Test extends Component{

    state = {
        isLove: true
    }

    handleClick=()=>{

        this.setState((prevSate)=>{
            console.log('内部:', this.state.isLove)
            return {
                isLove: !prevSate.isLove
            }
        },()=>{
            // 回调，获取最新的state
            console.log('最新state：', this.state.isLove)
        })

        console.log('外部:', this.state.isLove)
    }

    render(){
        return(
            <div>
                <span onClick={this.handleClick}>
                {this.state.isLove ? 'love' : 'like'}
            </div>
        )
    }

}

// 控制台的输出应该是,先输出外部的在输出内部的
// '外部:', true
// '内部:', true
// '最新state：', false