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{
constructor(props){
super(props)
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.
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.
Setstate in native events
Unlike synthetic events, the original event can get the updated state value directly after setting state
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