Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to understand React Fiber". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's take you to learn "how to understand React Fiber"!

Fiber background?

In earlier versions of React, before React 16.8.

A large number of simultaneous computing tasks block UI rendering in browsers. By default, JS operations, page layout, and page rendering all run in the browser's main thread, and they are mutually exclusive.

If JS operation continues to occupy the main thread, the page cannot be updated in time. When we call setState to update the page, React will traverse all nodes of the application, compare the diff algorithm with the old dom node, and update the page at the minimum cost. Even so, the whole process is in one go and cannot be interrupted. If there are many page elements, the whole process may take more than 16 milliseconds, and the frame drop phenomenon occurs.

In response to this phenomenon, the React team optimized the operation mechanism of web pages from the framework level, and Fiber was born.

Speaking of 16ms, let's look at this concept.

screen refresh rate

Most devices currently have a screen refresh rate of 60 times per second

The browser's rendering animation or page's per-frame rate also needs to be consistent with the refresh rate of the device screen.

Pages are drawn frame by frame, and when the number of frames per second (FPS) reaches 60, the page is smooth, below this value, the user will feel stuck.

Budget time per frame is 16.66 ms (1 sec/60)

1s 60 frames, so we try not to write code that takes more than 16ms per frame

Fiber was born.

The basic idea to solve the problem of the main thread being occupied by JS for a long time is to cut the operation into multiple steps and complete it in batches. That is, after completing part of the task, control is returned to the browser, allowing the browser time to render the page. After the browser is busy, continue the tasks that React has not completed before.

Older versions of React render recursively, using the JS engine's own function call stack, which executes until the stack is empty.

Fiber implements its own component call stack, which traverses the component tree in the form of a linked list and has the flexibility to pause, continue, and discard tasks. This is done by using the browser's requestIdleCallback API. The official explanation is this:

window.requestIdleCallback() calls functions sequentially during browser idle times, which allows developers to perform background or low-priority tasks in the main event loop without having critical event effects like delayed triggers for animation and user interaction. Functions are generally executed in first-in-first-call order unless the function expires its timeout before the browser calls it.

Core usage of requestIdleCallback

Want to respond quickly to users, so that users feel fast enough, do not block the user's interactive behavior

requestIdleCallback enables developers to perform background and low-priority work on the main event loop without affecting delayed critical events, such as animations and input responses

If the normal frame task is completed within 16ms, it means that time has been given. At this time, the task registered in requestIdleCallback will be executed.

Fiber is an execution unit.

Fiber is an execution unit, each time an execution unit is executed, React checks how much time is left, and if there is no time, it gives up control.

Fiber is a data structure.

React's current approach is to use linked lists, where each VirtualDOM node is internally represented as a Fiber, which can be represented by a JS object:

const fiber = { stateNode, //node instance child, //child node sibling, //sibling node return, //parent} Reconciliation phase before Fiber

React recursively compares VirtualDOM trees to find nodes that need to be changed, and updates them simultaneously. This process is called reconciliation.

During Reconcilation, React will occupy browser resources all the time, one will cause the event triggered by the user to not get a response, the other will cause the frame to drop, and the user may feel stuck.

let root = { key: 'A1', children: [ { key: 'B1', children: [ { key: 'C1', children: [] }, { key: 'C2', children: [] } ] }, { key: 'B2', children: [] } ]}function walk(element) { doWork(element); element.children.forEach(walk);}function doWork(element) { console.log(element.key);}walk(root);

Before Fiber, React recursively traversed virtual DOM nodes, hogging browser resources, actively wasting performance, causing stuttering, and the reconciliation phase was uninterruptible.

After the emergence of Fiber, CPU resources are reasonably allocated through some Fiber scheduling strategies, so that their coordination phase can be turned into a terminal, and CPU (browser) execution rights are timely allowed to improve performance optimization.

Fiber execution phase

There are two phases per render: Reconciliation and Commit.

Harmonization phase: This phase can be interrupted. Dom-Diff algorithm is used to find all node changes, such as node addition, deletion, attribute change, etc. These changes are called side effects.

Submit phase: Perform the side effects calculated in the previous phase that need to be dealt with in one go. This phase must be synchronized and cannot be interrupted.

Simple to understand,

Phase 1: Generate a Fiber tree to obtain node information that needs to be updated. (Interrupted)

Phase 2: Batch update the nodes that need to be updated at once. (Not Interrupted)

Fiber's coordination phase can be interrupted by higher priority tasks, such as keyboard typing.

Phase 1 can be interrupted, allowing higher priority tasks to be executed first, greatly reducing the probability of page frames falling from the frame level.

Fiber Execution Process render phase

Fiber Reconciliation A Fiber tree is generated when the Diff calculation is performed in Phase 1. This tree is generated by adding additional information to the Virtual DOM tree, which is essentially a linked list.

commit stage

Fiber trees are generated in one go when first rendered. When Diff is needed later, a new tree is generated based on the existing tree and the latest Virtual DOM information. Each time a new node is created in the new tree, control is handed back to the main thread to check if there are any higher-priority tasks to execute. If not, the process of building the tree continues.

1. If there is a higher priority task to be performed in the process, Fiber Reconciler will discard the tree being generated and re-execute it when it is idle.

2. In the process of constructing the Fiber tree, Fiber Reconciler will save the node information to be updated in the Effect List, and during the execution of Phase 2, the corresponding nodes will be updated in batches.

How does the detail extension render phase traverse and generate the Fiber tree?

Start at the vertex and traverse

If there is a first child, go through the first child first.

If there is no first child, it marks the completion of this node traversal.

If a brother crosses a brother

If there is no next brother, return parent node ID to complete parent node traversal, if there is uncle traversal uncle

No parent node traversal ends

How does the commit phase work?

Similar to Git branching function, fork out a copy from the old tree, add, delete and update the new branch, and submit it after testing.

At this point, I believe that everyone has a deeper understanding of "how to understand React Fiber", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.