On the set state of react


This article refers to the Zhihu column of react official document

State and props

State (state) and props (properties) are the data needed for react component rendering. The difference is that state is private to the component and is completely maintained by the component itself; props is passed from the parent component to the current component.

The state can be initialized in the constructor of the class component, which is the only place to assign a value to the state. If you want to change the state, you can’t use the this.state.xxx =If you assign a value in the form of XXX, react will think that the state has not changed and the component will not be updated. You need to call thesetStateMethod to update state

class Counter extends React.Component{ 
        this.state = {
            count: 0
     // render

Is setstate asynchronous?

There is a sentence in the react document“For performance reasons, react may take multiplesetState()Calls are merged into one call. “In other words, when we want to do some calculations with the latest state after the set state, we may not get the value we want.

But this does not mean that the setstate must be asynchronous. The implementation of this method is a synchronous process, but react will make the value of the setstate update asynchronously in some scenarios for performance reasons. It can be understood asSetstate itself is not an asynchronous process, but react does not guarantee that setstate must be synchronous.

Setstate in composite events

In order to solve the problem of cross platform, react is compatible with all browsers, and encapsulates a set of its ownCross browser wrapper for native event of browser, i.eComposite event. Onclick, onfocus, onblur are composite events.
On the set state of react
As shown in the figure, by clicking the event to change the value of the count state, the original value is output in the console after the setstate, and the setstate in the composite event is not synchronized.

Setstate in the life cycle

The setState method is invoked in the lifecycle. React also does not update state immediately, but after componentDidUpdate is executed, setState is executed again.
On the set state of react

Setstate in native events

Unlike synthetic events, the original event can get the updated state value directly after setting state
On the set state of react

Setstate in setTimeout

SetTimeout can be used in native events, composite events, and life cycles. No matter what scenario, due to the JS event loop mechanism, the latest state can always be obtained after setting state in setTimeout
On the set state of react

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]