A detailed explanation of how React Fiber works

What is React Fiber?

React Fiber, in simple terms, is a new coordination engine introduced in React v16 to implement incremental rendering of Virtual DOM.

In layman's terms: it is a processing method that can make the React view update process smoother.

We all know: processes are big, threads are small. Fiber is a processing mechanism with finer granularity than thread. You can also guess from this word: React Fiber will be very "thin". Let’s continue reading to see what the details are.

Why React Fiber?

As mentioned before, React Fiber is designed to make React's view update process smoother. Why? The React view update was not smooth before?

It’s true. Before React v16, React’s view updates did have big performance issues, the most prominent of which was its synchronous update mechanism.

Before React decides to load or update a component tree, it will roughly perform the following series of actions: call the lifecycle function of each component --> calculate and compare the Virtual DOM --> update the real DOM tree. This process is synchronous, that is, once the process starts, it will run in one go until the real DOM tree is updated.

However, this mechanism becomes problematic when the component tree is large: a component tree with 300 components needs to be updated completely. Assuming that a component update only takes 1ms, it will take 300ms to update the entire tree. During this 300ms period, the main thread of the browser has been "concentrated" on updating the component tree (the function call stack will be very long at this time), and is "indifferent" to any operations on the page. During this period, if the user types a few words in an input box, there will be no response on the page, because rendering the key input results also requires the main thread, but at this time the main thread is busy updating the component tree. After 300ms, the browser main thread is free to render the words just typed into the input box.

It's too laggy, really.

Due to the single-threaded working characteristics of JavaScript, there has always been a principle in the industry: no action should occupy the main thread for a long time. If the main thread is not returned for a long time, the program will not be able to respond to other inputs during this period. There is no response after input, or the response is very slow, which is what we often call "lag". Obviously, React's synchronous update mechanism violates this principle when the component tree is huge, which is a big taboo.

This is why React Fiber came into being: to solve the performance bottleneck of old React view updates.

How does React Fiber work?

First of all, React Fiber does not solve the problem of time-consuming updates of large component trees. In fact, the total time consumption is still the same. But it solves a problem that has been criticized by many developers: occupying the main thread for a long time.

The solution is: sharding.

Its working principle is as follows: break down the time-consuming update task into small task slices, and return each small task slice to the main thread after executing it to see if there are any other urgent tasks to do. If an urgent task happens to be found when returning to the main thread, the current update task will be stopped immediately, and the main thread will be asked to do the urgent task instead. After the main thread finishes the urgent task, it will do the update task again. (Note ⚠️: it is to start over! Not to continue from the last interrupted point); if there is no urgent task, then you dare to continue with the next task slice.

Simply put, it lowers the priority of view updates and fragments the update process.

Now let's take a look at how React Fiber handles an update process:

1. An update process is divided into the Reconciliation phase and the Commit phase. The Reconciliation phase (scheduling phase) updates the data and generates a new virtual DOM, and performs a diff on the old and new virtual DOMs to obtain the elements that need to be updated and put them into a new update queue. The Commit phase (rendering phase) traverses the update queue and updates all changes to the real DOM at once.
2. The Reconciliation phase is split into shards. This phase can be interrupted by more urgent tasks, and the sharded tasks may need to be restarted halfway through.
3. For the Commit phase, the DOM is updated in one go and cannot be interrupted.
   

The implementation principle of React Fiber

There are two difficulties in implementing React Fiber: How to implement pause/restart? How to distribute tasks?

For the former, pause/restart means we need to save the state. Here, the "single linked list tree traversal algorithm" with linked lists and pointers is used in the implementation to record the previous and next steps in the traversal process.

For the latter, the two APIs requestAnimationFrame and requestIdelCallback are used. Among them, requestAnimationFrame is executed by the browser in every frame, and some high-priority tasks can be placed there; while requestIdelCallback is executed by the browser only if there is free time at the end of a frame, and some low-priority tasks can be placed there, which requires polyfill (due to poor compatibility).

What impact does React Fiber have on our daily development?

React Fiber may call the following lifecycle functions during the Reconciliation phase (which also means that the lifecycle functions at this stage may be called multiple times during a load and update process):

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps
• shouldComponentUpdate
  

If you happen not to use react hooks and instead use traditional class components for development, remember not to do operations that only need to be done once in the above lifecycle functions (for example: initiating an ajax request to obtain data when the page is initialized).

If you normally use react hooks for development, then it’s okay, just watch it for fun.

The above is a detailed explanation of how React Fiber works. For more information about how React Fiber works, please pay attention to other related articles on 123WORDPRESS.COM!