In React, setStateit can be either synchronous or asynchronous, depending on the execution timing and execution context
[1]. setStateThe asynchrony does not mean that it is implemented by asynchronous code. In fact, the execution process and code are both synchronous, but the sequence of synthetic events and hook function calls is before the update, which results in incompatibility in synthetic events and hook functions. Changes are seen immediately , while in statenative events and are synchronoussetTimeoutsetState
[2]. In React17, setStateit is executed in batches, because it will be set before execution executionContext, but if it is setTimeoutin functions such as event listeners, it will not be set executionContext. At this time, setStateit will be executed synchronously. You can wrap a layer of batchUpdatesfunctions outside and set it manually excutionContextSwitch to asynchronous batch execution
[3]. In Reactthe rendering process, an object setStatewill be created updateand hung on fiberthe object, and then performSyncWorkOnRootre-rendering will be scheduled. The order of a main task is: renderstage renderfunction execution --> commitstage real DOMreplacement --> setStatecallback function execution callback, so , it can be seen setStatethat the order of execution is renderafter and commitbefore
[4]. If ExecutionContextit is 0, it means that there are no other tasks currently in progress, and it setStateis synchronous. In Reactthe source code, when ExecutionContextit is 0, setStateit is synchronous
[5]. Batch update: Multiple sequences setStateare not executed synchronously one by one, but will be added to the queue one by one, and then executed together at the end. In synthetic events and life cycle hooks, setStatewhen the queue is updated, the merged state is stored , therefore, the value set before keywill be overwritten by the latter, and finally only sequential updates will be performed
In summary, setStateit can be either synchronous or asynchronous, depending on the timing of execution and the context of execution. In React, if manual control setStateof asynchronous execution is required
That is, it is asynchronous in synthetic events and life cycle functions, and synchronous in native events and timers. It does not distinguish between setStatesynchronous or asynchronous, but depends on whether it is batch updatein the middle
batchUpdatesFunctions can be manually set excutionContextto switch to asynchronous batch execution. At the same time, in synthetic events and life cycle hooks, setStatewhen the queue is updated, the merged state will be stored, so attention should be paid to keythe overwriting of values
(Add a community, expand the circle of contacts)
JS Interview Question 17 - Compare server-side rendering with client-side rendering
In what scenario is the event extension in JS interview question 16-Es6 used?
Framework - interview question 6 - talk about the hook function of Vue2 and Vue3
One article to understand the operation in the Internet
