In React, DOM updates use double-cache technology, which is dedicated to fast DOM updates.
What is double buffering? For example, when using canvas to draw an animation, the previous frame will be cleared before each frame is drawn, and it will take time to clear the previous frame. If the calculation of the current frame is relatively large, it will take a relatively long time. This results in a long gap between the previous frame being cleared to the next frame, and a white screen will appear.
In order to solve this problem, we can draw the current frame animation in the memory, and directly replace the previous frame with the current frame after drawing. In this way, a lot of time will be saved in the process of frame replacement, and no white space will appear. Screen problem. This technique of building and replacing directly in memory is called double buffering.
React uses double-buffer technology to complete the construction and replacement of the Fiber tree to achieve rapid update of DOM objects.
At most two Fiber trees exist in React at the same time. The Fiber tree corresponding to the content currently displayed on the screen is called the current Fiber tree. When an update occurs, React will rebuild a new Fiber tree in memory. The constructed Fiber tree is called workInProgress Fiber tree. In the double-buffer technology, the workInProgress Fiber tree is the Fiber tree that is about to be displayed on the page. When the Fiber tree is built, React will use it to directly replace the current Fiber tree to achieve the purpose of quickly updating the DOM, because the workInProgress Fiber tree is It is built in memory so the speed of building it is very fast.
Once the workInProgress Fiber tree is presented on the screen, it will become the current Fiber tree.
There is an alternate attribute in the current Fiber node object that points to the corresponding workInProgress Fiber node object, and an alternate attribute in the workInProgress Fiber node also points to the corresponding current Fiber node object.