Shulou(Shulou.com)06/02 Report--

This article mainly shows you the "sample analysis of synchronous or asynchronous problems of setState in React", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let me lead you to study and learn the article "sample analysis of synchronous or asynchronous problems of setState in React".

1. SetState synchronization? Asynchronous?

In the classy component of React, we can use the setState method to update the state state. But sometimes after using setState, you can't get the latest data.

In fact, the process and code executed by setState itself in React are synchronized only because of the performance optimization mechanism of the React framework itself. The call sequence of composite events and lifecycle functions in React is before the update, so that the updated values can not be obtained immediately in the composite events and lifecycle functions, forming an asynchronous form.

If the setState method is called in a loop n times in a composite event, if the React is not optimized, the current component will be rendered n times, which is a great waste of performance. So, for performance reasons, React merges multiple calls to the setState method into one. When setState is executed, the data in state is not updated immediately.

As mentioned earlier, calling setState directly in React's composite events and lifecycle functions takes on an asynchronous form.

In addition, if you go beyond the performance optimization mechanism of React and use setState in native events, setTimeout, it will take the form of synchronization.

two。 Behave asynchronously

1. React composition event

Events used directly in React, such as onChange, onClick, etc., are encapsulated by React, are composite events, and are managed by React. Then due to the mechanism of performance optimization, calling setState directly in the composite event will take the form of asynchronism.

In the following code, in the composite event onClick, you directly add 1 to the count in state, and then print the value of count. As a result, when you click the button for the first time, 0 is printed instead of the latest 1.

State = {count: 0}; add = () = > {this.setState ({count: this.state.count + 1}); console.log (this.state.count); / / 0}; render () {return (current count: {this.state.count} add);} 2. Life cycle function

Lifecycle functions are also managed by React, and calling setState directly in lifecycle functions will also take an asynchronous form.

In the following code, in the lifecycle componentDidMount function, add 1 to the count in state, and then print the value of count, resulting in a 0 instead of the latest 1.

State = {count: 0}; componentDidMount () {this.setState ({count: this.state.count + 1}); console.log (this.state.count); / / 0} render () {return (current count: {this.state.count} add);} 3. Manifested as synchronization

1. Primary event

The process performed by setState itself is synchronous, and using native events to bypass the management of React will take the form of synchronization.

The following code gets the DOM element through id and binds the click event with the native method. In the click event, add 1 to the count in state, and then print the value of count, which will print the latest count value of 1.

State = {count: 0}; componentDidMount () {const btn = document.getElementById ('btn'); btn.onclick = () = > {this.setState ({count: this.state.count + 1}); console.log (this.state.count); / / 1};} render () {return (current count: {this.state.count} add);} 2. SetTimeout

In the following code, a timer setTimeout is written in the lifecycle componentDidMount function, the count in state is added to 1 in setTimeout, and the value of count is printed after that, and the latest count value of 1 is printed.

Although setState is also written in the lifecycle componentDidMount function, it is not written directly in componentDidMount, but with a layer of setTimeout. In this way, setState takes the form of synchronization.

State = {count: 0}; componentDidMount () {setTimeout (()) = > {this.setState ({count: this.state.count + 1}); console.log (this.state.count); / / 1}, 0);} render () {return (current count: {this.state.count} add);} 4. Second parameter of setState

Both object and functional setState have a second parameter, which is an optional callback function. This callback function is called only after the status update and interface update (after the render call).

As shown in the following code, although setState is called directly in componentDidMount, the latest value of 1 is obtained by printing the value of count in the callback function of setState, because the callback function is called after the status update is completed, and of course you can get the latest count.

State = {count: 0}; componentDidMount () {this.setState ({count: this.state.count + 1}, () = > {console.log (this.state.count); / / 1});} render () {return (current count: {this.state.count} add) } these are all the contents of the article "sample Analysis of synchronous or Asynchronous problems of setState in React". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.