1. SetState is asynchronous in life cycle and composite events; In native events and asynchronous methods it is synchronous; (Asynchronous methods are mainly macro and micro tasks that involve JS event loops.)

  2. The setState asynchrony is actually the life cycle and composition events that are called before the update, causing them to get data that is not the updated value.

  3. SetState is optimized for batch updates in life cycle and synthesis events, that is, setState is performed multiple times on the same key, and only the last execution is taken. If multiple keys are being updated, merge the batch updates during the update.

The setState of the synthesized event, lifecycle

These two pieces of code indicate that setState is asynchronous during the synthesis event and life cycle, and setState multiple times only updates the value of the last setting.

Import React, {Component} from "React "; export default class App extends Component { state = { count: 0, }; changeCount = () => { console.info(this.state.count); // 0 this.setState({ count: 1, }); this.setState({ count: 3, }); console.info(this.state.count); / / 0}; Render () {return (<div> <button onClick={this.state.count} </div>); }}Copy the code
Import React, {Component} from "React "; export default class App extends Component { state = { count: 0, }; componentDidMount() { console.info(this.state.count); // 0 this.setState({ count: 1, }); this.setState({ count: 3, }); console.info(this.state.count); // 0} render() {return <div> = 3 {this.state.count}</div>; }}Copy the code

SetState in native events

import React, { Component } from "react"; export default class App extends Component { state = { count: 0, }; changeCount = () => { console.info(this.state.count); // 0 this.setState({ count: this.state.count + 1, }); console.info(this.state.count); / / 1}; componentDidMount() { document.getElementById("btn").addEventListener("click", this.changeCount); } render() {return (<div> <button id=" BTN "> </button> </div>); }}Copy the code

SetState in asynchronous functions

import React, { Component } from "react"; export default class App extends Component { state = { count: 0, }; componentDidMount() { setTimeout(() => { console.info(this.state.count); // 0 this.setState({ count: this.state.count + 1 }); console.info(this.state.count); / / 1}, 0); } render() { return <div> {this.state.count}</div>; }}Copy the code

exercises

Finally, look at the output of this code:

import React, { Component } from "react"; export default class App extends Component { state = { count: 0, }; componentDidMount() { this.setState({ count: this.state.count + 1 }); console.log("origin1", this.state.count); // 0 step1 this.setState({ count: this.state.count + 1 }); console.log("origin2", this.state.count); // 0 step2 setTimeout(() => { console.log("timeout start", this.state.count); // 3 step9 this.setState({ count: this.state.count + 1 }); console.log("timeout1", this.state.count); // 4 step10 this.setState({ count: this.state.count + 1 }); console.log("timeout2", this.state.count); // 5 step11 }, 1000); new Promise((reslove) => { console.log("Promise start", this.state.count); //0 step3 this.setState({ count: this.state.count + 1 }); console.log("Promise1", this.state.count); // 0 setp4 reslove({}); this.setState({ count: this.state.count + 1 }); console.log("Promise2", this.state.count); // 0 setp5 }).then(() => { console.log("then", this.state.count); // 1 setp6 this.setState({ count: this.state.count + 1 }); console.log("then1", this.state.count); // 2 setp7 this.setState({ count: this.state.count + 1 }); console.log("then2", this.state.count); // 3 setp8 }); } render() { return <div>setState {this.state.count}</div>; }}Copy the code