setState of asynchronous and synchronous react issues

1). SetState () updates the status is asynchronous or synchronous?

        a. execution setState () position?

            In the callback function react controlled: Life Cycle hook / react event listener callback

            Asynchronous callbacks non react controlled: timer callback / callback native DOM event listeners / promise callback / ...

        b. asynchronous OR sync?

            react related callbacks (lifecycle callbacks, event listeners callback): Asynchronous

            Other asynchronous callback (timer, native DOM event listener callback, Promsie callback): Synchronization

Verify the following:

import React, { Component } from 'react'

class Demo extends Component {
    state = {
        count:0
    }
    / * * Asynchronous Update: react in the event listener callback, setState is asynchronous updates * / 
    update1 = () => {
        console.log('update1 更新前',this.state.count)
        this.setState(state=>({count:state.count+1}))
        the console.log ( ' after updating update1 ' , the this .state.count)
    }
    / * * Asynchronous Update: react lifecycle callback function, setState is asynchronous updates * /
    componentDidMount(){
        console.log('componentDidMount 更新前',this.state.count)
        this.setState(state=>({count:state.count+1}))
        the console.log ( ' after componentDidMount updated ' , the this .state.count)
    }
    / * * Synchronization update: timer callback   * / 
    Update2 = () => {
        setTimeout(()=>{
            the console.log ( ' before the timer update ' , the this .state.count)
             the this .setState (State => ({COUNT: state.count + . 1 }))
             / * * update process leading to the setState trigger updated after execution code below, the synchronization update here * / 
            the console.log ( ' the timer update ' , the this .state.count)
        },3000)
    }
    / * * Synchronization update: native DOM event listener callback --- combined ref   * / 
    update3 = () => {
        let count_dom = this.refs.count_dom
        count_dom.onclick = () => {
            the console.log ( ' original DOM event listener callback before update ' , the this .state.count)
             the this .setState (State => ({COUNT: state.count + . 1 }))
            console.log ( ' native DOM event listener callback after update ' , the this .state.count)
        }
    }
    / * * Synchronization update: promise callback   * / 
    Update4 = () => {
        Promise.resolve().then(value=>{
            console.log('promise 更新前',this.state.count)
            this.setState(state=>({count:state.count+1}))
            the console.log ( ' after updating promise ' , the this .state.count)
        })
    }
    render() {
        const {count} = this.state
        console.log('render渲染',count)
        return ( 
            <>
                <h2 ref="count_dom">{count}</h2>
                <button onClick={this.update1}>更新1</button>
                <button onClick={this.update2}>更新2</button>
                <button onClick={this.update3}>更新3</button>
                <button onClick={this.update4}>更新4</button>
                <button onClick={this.update5}>更新5</button>
            </>
        );
    }
}
 
export default Demo;

Data can be learned as described above in the case, you can change the synchronization acquisition setState

The reason: The operation await setState That promise callback where it is synchronized

　　

 

 

    

 2) About asynchronous setState ()

        a. multiple calls, how to deal with?

            setState ({}): updated combined status, called only once render () update the screen update --- and the interface updates are merged

            setState (fn): status updates multiple times, but only one call render () update interface --- no status updates merge, but merge the updated interface

        b. How to get the status of asynchronous data updates?

            In setState () callback function of the callback

 

 

 

 

 

.