Why setState

We use the setState method when we want to change text by clicking a button, such as:

import React, { Component } from 'react' export default class App extends Component { constructor(props) { super(props);  this.state = { message: "Hello World" } } render() { return ( <div> <h2>{this.state.message}</h2> <button onClick={e => ChangeText () {this.setState({message: "text has been changed"})}}Copy the code

When we call setState, the render function is re-executed to create the ReactElement object based on the latest State; The DOM is then modified based on the latest ReactElement object

In addition, the setState method is inherited from Component

SetState Asynchronous update

ChangeText () {this.setState({message: "text has been changed"}) console.log(this.state.message); // Hello World }Copy the code

SetState is an asynchronous operation, and the result of the latest state cannot be obtained immediately after the execution of setState

Why update asynchronously

If setState is updated every time, it means that the render function will be frequently called and the interface will be re-rendered, which is very inefficient. Therefore, the best way is to obtain multiple updates and then update in batches. If state is updated synchronously, But the render function hasn’t been executed, so the state and props can’t keep in sync, which can cause a lot of problems

How do I get the updated value

SetState takes two arguments: the second argument is a callback function that will be executed after the update

ChangeText () {this.setState({message: "text has been changed"}, () => {console.log(this.state.message); // Text has been changed}); }Copy the code

2, through the life cycle function componentDidUpdate

componentDidUpdate(prevProps, provState, snapshot) {
  console.log(this.state.message);
}
Copy the code

Synchronous or asynchronous

There are two cases in which setState methods are synchronous or asynchronous

  1. In component life cycle or React composite events, setState is asynchronous

  2. In setTimeout or native DOM events, setState is synchronized

// setTimeout changeText() {setTimeout(() => {this.setState({message: "text has been changed"}); console.log(this.state.message); // Text has been changed}, 0); } // native DOM event componentDidMount() {const btnEl = document.getelementById (" BTN "); Btnel.addeventlistener ('click', () => {this.setState({message: "text has been changed"}); console.log(this.state.message); // Text has been changed})}Copy the code

SetState merger

Data consolidation

This.setstate ({age: 18}); this.setState({age: 18}); this.setState({age: 18});Copy the code

Multiple setStates merge

this.state = {
  counter: 0
}


increment() {
    this.setState({
      counter: this.state.counter + 1
    });

    this.setState({
      counter: this.state.counter + 1
    });

    this.setState({
      counter: this.state.counter + 1
    });
  }
Copy the code

The setState method is executed three times, but the value of counter is still 1, which is a combination of states

If you want to change to 3, how do you do it: Pass in a function

increment() {
  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })

  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })

  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })
}
Copy the code