Code analysis of synchronous and asynchronous setState issues in React

React originated as an internal project at Facebook. The emergence of React is a revolutionary innovation. React is a subversive front-end framework. React officially introduces it as: a declarative, efficient, flexible JavaScript library for creating user interfaces. Even though React's main function is to build UI, the gradual growth of the project has made React a WebApp solution that covers both the front-end and back-end.

Angular uses the watcher object, Vue uses the observer mode, and react uses the state. They each have their own characteristics. There is no good or bad, only different choices due to different needs.

React's official website: https://reactjs.org/GitHub

The address is: https://github.com/facebook/react

1. In React, event handling functions controlled by React, such as onClick, onChange, etc., setState is asynchronous

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props) {
        super(props);    

        this.state={
            name: 'hello'
        }    
    }

    _onChange(e) {
        this.setState({
            name:' world'
        })

        console.log(this.state.name); //hello
    }

  render () {
    return (
      <div className='cp'>
        <input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>                
      </div>
    );
  }
}

2. In native JS listening events, such as addEventListener, setState is synchronous

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props) {
        super(props);    

        this.state={
            name: 'hello'
        }    
    }

    _onChange(e) {
        // do something
    }


    componentDidMount() {
        let input = document.querySelector('.cp-input');
        input.addEventListener('click', ()=>{
            this.setState({
                name:' world'
            })

            console.log(this.state.name); //world
        })
    }

  render () {
    return (
      <div className='cp'>
        <input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>                
      </div>
    );
  }
}

3. In setTimeout, setStatet is synchronous

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props) {
        super(props);    

        this.state={
            name: 'hello'
        }    
    }

    _onChange(e) {
        // do something
    }


    componentDidMount() {
        setTimeout(()=>{
            this.setState({
                name:' world'
            })
            console.log(this.state.name); //world
        }, 1000)
    }

  render () {
    return (
      <div className='cp'>
        <input className='cp-input' value={this.state.name} onChange={this._onChange.bind(this)} type="text"/>                
      </div>
    );
  }
}

The above is the detailed content of parsing the detailed analysis of the synchronous and asynchronous code of setState in React. For more information about React setState synchronous and asynchronous, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: