Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what is the concept of setstate in react". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the concept of setstate in react" can help you solve the problem.

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

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

What is setstate in react

Based on normal usage, we basically use it to update the status state of the component. According to the official document:

SetState () queues changes to the component state and informs React that it needs to re-render the component and its subcomponents using the updated state. This is the main way to update the user interface in response to event handlers and to process server data.

Think of setState () as a request rather than a command to update the component immediately. To better perceive performance, React delays calling it and then updates multiple components with one delivery. React does not guarantee that changes to state will take effect immediately.

According to its interpretation, the role of setState is to queue the state update task of the component, rather than immediately update the state status on the call, that is, setState as a request rather than a command to update the component immediately. So when you get the value of the component's state after calling the setState method, you get a value that is not updated.

SetState () does not always update the component immediately. It will postpone updates in bulk. This makes it a concern to read this.state immediately after calling setState (). To eliminate the hidden trouble, use the callback function of componentDidUpdate or setState (setState (updater, callback)), both of which can be triggered after the update is applied.

Use

SetState (updater, [callback])

Updater is the function that returns the stateChange object: (state, props) = > stateChange

This.setState (state = > ({count: state.count + 1}), () = > {/ / callback console.log ('test3 setState callback ()', this.state.count)}) setState (stateChange, [callback]) after status update and interface update

StateChange is the object

Callback is an optional callback function that is executed only after the status update and the interface update

This.setState ({count: this.state.count + 1}), () = > {/ / callback console.log ('test3 setState callback ()', this.state.count)} after the status update and interface update). That's all for the introduction of "what is the concept of setstate in react". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.