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

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

After react calls setstate, it will happen: 1, merge the passed parameter object with the current state of the component, trigger the reconciliation process; 2, build the React element tree according to the new state and re-render the entire UI interface; 3, after obtaining the element tree, React will calculate the node difference between the new tree and the old tree, and then minimize re-rendering.

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

What happens after react calls setstate

React designed the setState method to re-render the page.

Two ways to write the update status of setState ()

SetState (updater, [callback]), updater is the function that returns the stateChange object: (state, props) = > the state and props received by stateChange are guaranteed to be up to date

SetState (stateChange, [callback]), stateChange is the object, and callback is the optional callback function, which is executed only after the status update and interface update

Summary: object mode is the abbreviation of function mode if the new state does not depend on the original state = > use the object mode if the new state depends on the original state = = > use the function mode if you need to get the latest state data after setState (), read it in the second callback function

What happens after the call to setState?

After calling the setState function in the code, React merges the passed-in parameter object with the current state of the component, and then triggers the so-called Reconciliation.

After the blending process, React builds the React element tree based on the new state in a relatively efficient way and starts to re-render the entire UI interface.

After React gets the element tree, React automatically calculates the node difference between the new tree and the old tree, and then minimizes the re-rendering of the interface according to the difference.

In the differential computing algorithm, React can know with relative precision which locations have changed and how they should be changed, which ensures that they are updated on demand rather than re-rendered.

This is the end of the introduction to "react call setstate instance Analysis". 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.