Fiber is a reconstruction of the React core algorithm. The core principle is similar to the CPU time sharding mechanism. When the screen refresh rate of the device is 60 FPS, it will be smooth. That is, a frame event is 16ms, and a render process goes through the processing of input events -> Processing timer -> Start frame -> requestAnimationFrame -> Layout -> Draw -> idle phase.
However, because the rendering thread and JS thread are mutually exclusive, the old version will use recursion to compare the virtual DOM tree, find the nodes that need to be changed, and then update them synchronously. This process will keep JS occupied by the rendering thread, resulting in the above rendering process cannot be carried out.
Fiber splits the rendering and scheduling process into execution units. React checks how much time is left and cedes control if there isn’t
The process of rendering and scheduling from the root node can be divided into two phases: the Render phase and the COMMIT phase.
Render phase: this phase is interruptible and finds changes for all nodes. Commit phase: this phase is non-interruptible and performs all changes
In the Render phase, React Fiber first converts the virtual DOM tree into a Fiber tree, and the data structure of the Fiber tree adopts a linked list, containing Pointers of parent/child/elder nodes. Then, all Fiber nodes are traversed. Output the final effect list
The commit phase then executes the side effects calculated in the previous phase that need to be addressed once, without interruption
Two important apis
requestIdleCallback, requestAnimationFrame