In the latest React.js 18, React has added the long-awaited concurrent renderer and supports enabling concurrent update functionality (without concurrent update mode). The architecture of concurrent updates is shown in the following figure. This article will start from the Fiber architecture and delve into the principles of React concurrency.
Fiber === React DOM#
The Fiber architecture is actually the implementation of VDOM in React. It is a reimplementation of the core algorithm in React after version 16.
Its main goal is to improve the responsiveness of animations, layouts, gestures, and other operations. Fiber is capable of dividing rendering work into multiple chunks and distributing them across multiple frames for rendering. Other key features include the ability to pause and resume rendering and reuse when there are new updates; the ability to prioritize different updates; and the new concurrent mode.
Before React 16#
When calling the render method of ReactDOM or triggering an update (setState), React goes through two phases, namely the reconciler and renderer. From the perspective of functionality, these two phases correspond to the Diff and rendering processes, as shown in the following figure:
- Reconciliation Phase: Official Explanation. React recursively traverses the new data from top to bottom to generate a new Virtual DOM, and then uses the Diff algorithm to find the elements (Patch) that need to be changed and puts them into the update queue.
- Rendering Phase: Traverse the update queue and update/render the corresponding elements by calling the API of the host environment. The host environment can be DOM, Native, WebGL, etc.
In the reconciliation phase, since a recursive traversal method is used, this is also called the Stack Reconciler, mainly to distinguish it from the Fiber Reconciler. This method has a characteristic: once the task starts, it cannot be interrupted, so JavaScript will occupy the main thread all the time. It has to wait until the entire Virtual DOM tree is calculated before handing over the execution to the rendering engine. This will cause some user interactions, animations, and other tasks to not be processed immediately, resulting in lag and greatly affecting the user experience.
To solve this problem, React now introduces concurrent mode and implements task interruption/resumption through a priority algorithm. The original Stack Reconciler architecture cannot achieve task interruption/resumption and does not support asynchronous updates. Therefore, version 16 was refactored and the Fiber architecture was introduced.
What is Fiber#
In the introduction above, we have determined that the main goal of Fiber is to enable React to use concurrent scheduling. Specifically, the following goals need to be achieved:
- Task interruption and resumption
- Assigning priorities to different types of tasks
To achieve this, we need to design a method to decompose these "tasks" into units for saving some information about the current update, as well as some static data (such as the node information corresponding to the current task). This is a Fiber node (FiberNode), and the Fiber architecture is a tree structure composed of multiple FiberNodes. Different FiberNodes are connected by properties such as child, return, and sibling.
In summary, Fiber has three meanings:
- As an architecture, Fiber is a tree structure composed of FiberNodes, which is different from the Stack Reconciler before version 16. The Reconciler in version 16 is based on Fiber.
- As a data structure, each FiberNode corresponds to a ReactElement, which saves information such as the type and DOM structure of the component.
- As a unit of work, each FiberNode saves the state that needs to be changed and the work that needs to be performed in this update.
Components of the Fiber Architecture#
In general, the Fiber architecture consists of three parts:
- FiberRootNode: Saves information such as the mounted root node and is the starting node for executing updates.
- Responsible for the conversion between the Current Fiber Tree and the Wip Fiber Tree
- Saves scheduling information for tasks
- HostRoot: The root node mounted on the host environment, connecting the entire Fiber Tree
Working Principle of Fiber#
In the Fiber architecture, there are two Fiber Trees, one is the Fiber Tree corresponding to the real UI, and the other is the workInProgress Fiber Tree being constructed in memory. They are referred to as "current" and "workInProgress" respectively, and these two Fiber Trees are connected to each other through the alternate property.
This is a working mechanism called Multiple buffering - Wikipedia. Imagine that when Fiber needs to be updated, instead of directly using the current Fiber Tree for updates, a copy of the workInProgress Fiber Tree based on the current Fiber Tree is used for updates. After the update is completed, simply swap the two Fiber Trees to complete the update of the Fiber Tree.
Summary#
This article briefly introduces the concurrent model introduced in React 16 and later versions, and introduces the composition and working principles of the Fiber structure. In the following chapters, the three core processes and their interactions in React will be introduced, further analyzing the principles of React concurrency.