What is setstate in react

In react, setstate is a method used to update the component state; setState() queues changes to the component state and notifies React that it needs to re-render this component and its children using the updated state. Component, the syntax is "setState(object,[callback function])".

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is setstate in react

Based on daily usage, we basically use it to update the state of the component. According to the official documentation:

setState() queues changes to the component state and notifies React that this component and its subcomponents need to be re-rendered with the updated state. This is the primary way for updating the user interface in response to event handlers and processing server data.

Think of setState() as a request rather than a command that immediately updates the component. For better perceived performance, React calls it lazily and then updates multiple components in a single pass. React does not guarantee that state changes will take effect immediately.

According to its explanation, the function of setState is to queue the state update task of the component into the task queue, instead of immediately updating the state state by calling it, that is, setState is regarded as a request rather than a command to immediately update the component. Therefore, when you get the value of the component's state after calling the setState method, you will get a value that has not been updated.

setState() does not always update components immediately. It defers updates in batches. This makes it dangerous to read this.state immediately after calling setState(). To eliminate hidden dangers, please use the callback function of componentDidUpdate or setState (setState(updater, callback)). Both methods can ensure that it is triggered after the application update.

Use

setState(updater, [callback]),

updater is a function that returns a stateChange object: (state, props) => stateChange

this.setState(state => ({count: state.count + 1}), () => { 
// 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })

setState(stateChange, [callback])

stateChange is an object,

Callback is an optional callback function, which is executed after the status is updated and the interface is updated.

this.setState({count: this.state.count + 1}), () => {
 // 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
      })

Summary:

Object mode is the abbreviation of function mode

If the new state does not depend on the original state===> Use the object method

If the new state depends on the original state===> Use the function method

If needed after setState() Get the latest status data and read it in the second callback function

Recommended learning: "react video tutorial"

The above is the detailed content of What is setstate in react. For more information, please follow other related articles on the PHP Chinese website!