setState的同步异步

     点击按钮后通过setState让state里面的count加一，当我们进行下面的代码操作，handleClick里面的进行三次setState，打印的结果是三个1，后面每次点击打印的结果都加一，因为此时setState是同步执行的，里面取到的count都是更新前的1。在handleClick2里面，我们把更新状态的操作放在了一个setTimeout里面，此时是属于异步任务，则第一次打印的结果是2,3,4。

import React, { Component } from 'react'

export default class App extends Component {
    state={
        count:1
    }
    render() {
        return (
            <div>
                {this.state.count}
                <button onClick={this.handleClick}>同步加</button>
                <button onClick={this.handleClick2}>异步加</button>

            </div>
        )
    }
    handleClick=()=>{
        this.setState({
            count:this.state.count+1
        })
        console.log(this.state.count);
        this.setState({
            count:this.state.count+1
        })
        console.log(this.state.count);

        this.setState({
            count:this.state.count+1
        })
        console.log(this.state.count);

    }
    handleClick2=()=>{
        setTimeout(()=>{
            this.setState({
                count:this.state.count+1
            })
            console.log(this.state.count);
            this.setState({
                count:this.state.count+1
            })
            console.log(this.state.count);
    
            this.setState({
                count:this.state.count+1
            })
            console.log(this.state.count);
        },0)
    }
}

 setState的第二个参数是一个回调函数，在里面写的逻辑会在状态和dom更新完毕后执行。比如我们把打印写在setState的第二个参数回调函数里面，则第一次点击的结果是2,2,2；为更新后的state里面的值，后面每次点击累加。

    handleClick = ()=>{
        this.setState({
            count:this.state.count+1
        },()=>{
            console.log(this.state.count)
        })

        this.setState({
            count:this.state.count+1
        },()=>{
            console.log(this.state.count)
        })

        this.setState({
            count:this.state.count+1
        },()=>{
            console.log(this.state.count)
            // 状态 和真实dom已经更新完了，
        })
    }

结论：    setState处在同步的逻辑中，  异步更新状态，更新真实dom
              setState处在异步的逻辑中，  同步更新状态，同步更新真实dom, 

setState 接受第二个参数， 第二个参数式回调函数， 状态和dom更新完后就会被触发。

所以我们在平时项目中，更新状态后想要立即去使用里面的值做一些操作的时候，可以把逻辑写在setState的第二个参数回调函数里面。当然在异步操作中是可以直接操作state里面的数据的。