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:

Understanding of the synchronous or asynchronous problem of setState in React
The use of setState in React and the use of synchronous and asynchronous
Use of setState synchronous and asynchronous scenarios in React

<<: MySQL statement arrangement and summary introduction

>>: How to install and use Cockpit on CentOS 8/RHEL 8

MySQL 8.0.25 installation and configuration tutorial under Linux

Code analysis of synchronous and asynchronous setState issues in React

MySQL 8.0.25 installation and configuration tutorial under Linux

How to install jupyter in docker on centos and open ports

Use of Linux chkconfig command

Implementation of CSS dynamic height transition animation effect

How to install the green version of MySQL Community Server 5.7.16 and implement remote login

Detailed tutorial for downloading, installing and configuring MySQL 5.7.27

XHTML: Frame structure tag

Summary of some of my frequently used Linux commands

Operate on two columns of data as new columns in sql

How to migrate sqlite to mysql script

Recommend

The docker-maven-plugin plugin cannot pull the corresponding jar package

Docker realizes the connection with the same IP network segment

Detailed explanation of the relationship between React and Redux

Detailed explanation of padding and abbreviations within the CSS box model

Analysis of the principle of centering elements with CSS

Summary of several common logs in MySQL

Example of using negative margin to achieve average layout in CSS

Introduction to Linux and the most commonly used commands (easy to learn, but can solve more than 95% of the problems)

Analysis of Nginx Rewrite usage scenarios and configuration methods

Web componentd component internal event callback and pain point analysis

Div can input content without using input as an input box to block the automatic input style

Zabbix configures DingTalk's alarm function with pictures

Explanation of the precautions for Mysql master-slave replication

Analyze MySQL replication and tuning principles and methods

Detailed explanation of the data responsiveness principle of Vue