The Use of setState in React and the Use of Synchronous and Asynchronous

  • 2021-11-01 23:07:11
  • OfStack

In react, if you use this. state directly to modify the state, it will not cause the re-rendering of the component, and you need to modify the attributes of the component through this. setState.

1. Two definitions of this. setState

Define the initial state


state = { count: 0 },

If there is a button at this time, click the button to add 1 to the count, we can write it in two ways

(1) Passing objects


this.setState({ count: this.state.count + 1})

(2) Transfer function


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

2. What is the difference between the two ways of setState?

If the value of the changed state needs to depend on the value of the last state, this situation requires the form of a function, such as the following situation


addCount(){
  this.setState({ count: this.state.count + 1})
  this.setState({ count: this.state.count + 1})
  this.setState({ count: this.state.count + 1})
}

At this time, only 1 +1 operation will be performed, because inside React, many setState will be merged, and the new state will be merged by Object. assgin ({}, {count: 0}, {count: 1}). The above assignment will be performed 3 times, but because the value of count has not been updated, the final result is only +1. If the assignment of setState is a function, the situation is different


addCount(){
  this.setState((state, props) => ({ count: count + 1}))
  this.setState((state, props) => ({ count: count + 1}))
  this.setState((state, props) => ({ count: count + 1}))
}

Such an operation results in a +3 effect because React judges that if a function is passed in, the function will be executed and the value of count has been modified

3. Is setState synchronous or asynchronous?

The is asynchronous

(1) That is, after we modify the state through this. setState, output the value of state in its next line will not get a new value

(2) Why asynchronous?

There are two reasons, 1 is to improve efficiency, every time the value of state is modified, it will cause the re-rendering of render, and the value of state modified many times can improve performance; 2 means that the update of render will be later than 1. If there is a child component in render, the props of the child component depends on the state of the parent component, and the props and state cannot be maintained by 1

(3) How to get the state value when asynchronous?
① In the callback function of setState


this.setState({ 
  count: this.state.count + 1}}, 
  ()=>{ console.log(this.state.count)})

② Obtained in componentDidUpdate


componentDidUpdate(){
  console.log(this.state.count)
}

The The The The The Is Synchronous

(1) That is, after we modify the state through this. setState, the output state is the new value in the next line of it

(2) What scenarios are synchronized?
① The native js gets the dom element and binds the event


<button id="addBtn"> Order me +1</button>
componentDidMount(){
   const addBtn = document.getElementById('addBtn')
   changeBtn.addEventListener('click',()=>{
       this.setState({ count: this.state.count + 1})
       console.log(this.state.message)
   })
}

② Timer setTimeout


<button onClick={ e => this.addOne() }> Order me +1</button>
addOne(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
 console.log(this.state.count ) },0)
}


Related articles: