What is fiber in react

Fiber is React’s new scheduling algorithm and a reimplementation of the core algorithm. React Fiber fragments the update process. After each update process is executed, control is returned to React's task coordination module to see if there are other urgent tasks to be done. If there are urgent tasks, just do the emergency tasks.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

Fiber was introduced after the react16 version, and the scheduling, coordination, diff algorithm, and rendering at the entire architecture level are closely related to fiber.

What is React Fiber?

When react renders components, the entire process from the start of setState to the completion of rendering is synchronous ("all in one go"). If the components that need to be rendered are relatively large, js execution will occupy the main thread for a long time, which will lead to poor responsiveness of the page and make react less effective in applications such as animation and gestures.

In order to solve this problem, the react team rewrote the core algorithm in react-reconciliation after two years of work. And this new feature was released in the v16 version. In order to distinguish the previous and subsequent reconcilers, the previous reconciler is usually called stack reconciler, and the rewritten one is called fiber reconciler, or Fiber for short.

The official explanation is "React Fiber is a reimplementation of the core algorithm."

Fiber can improve the responsiveness and performance of complex React applications. Fiber is React's new scheduling algorithm (reconciliation algorithm)

React Fiber fragments the update process. After each update process is executed, control is returned to React's module responsible for task coordination to see if there is any There are other urgent tasks to do. If there are no urgent tasks, continue to update. If there are urgent tasks, then do the urgent tasks.

When react renders components, the entire process from the start of setState to the completion of rendering is synchronous ("all in one go"). If the components that need to be rendered are relatively large, js execution will occupy the main thread for a long time, which will lead to poor responsiveness of the page and make react less effective in applications such as animation and gestures.

In order to solve this problem, the react team rewrote the core algorithm in react after two years of work-reconciliation. And this new feature was released in the v16 version. In order to distinguish the previous and subsequent reconcilers, the previous reconciler is usually called stack reconciler, and the rewritten one is called fiber reconciler, or Fiber for short.

Cause of lag

The workflow of Stack reconciler is very similar to the function calling process. Adjusting sub-components in parent components can be compared to the recursion of functions (this is why it is called stack reconciler). After setState, react will immediately start the reconciliation process, starting from the parent node (Virtual DOM) and traversing to find the difference. After all Virtual DOM traversals are completed, the reconciler can give the current information that needs to be modified to the real DOM, and pass it to the renderer for rendering, and then the updated content will be displayed on the screen. For a particularly large vDOM tree, the reconciliation process will be very long (x00ms). During this period, the main thread is occupied by js, so any interaction, layout, and rendering will stop, giving the user the feeling that the page is stuck. .

Scheduler

Scheduling is a process of fiber reconciliation, which mainly determines what should be done when. The process of ? shows that in stack reconciler, reconciliation is "all in one go". For functions, this is no problem, because we only want the running results of the function, but for UI, we also need to consider the following issues:

• Not all state updates need to be displayed immediately, such as updates to parts outside the screen.
• Not all update priorities are the same, such as user input responses taking precedence. The priority is higher than the response that fills the content through the request.
• Ideally, for some high-priority operations, it should be possible to interrupt the execution of low-priority operations, such as when the user inputs, A certain comment on the page is still reconciliating, and it should give priority to responding to user input

. Therefore, ideally, the reconciliation process should be as shown in the figure below, with only one small task being done each time. After finishing, you can "take a breath" and return to the main thread to see if there are any higher-priority tasks that need to be processed. If so, process the higher-priority tasks first. If not, continue execution (cooperative scheduling) Scheduling).

Task splitting fiber-tree & fiber

Let’s first look at how react works under stack-reconciler. Create (or update) some elements in the code, react will create (or update) the Virtual DOM based on these elements, and then react will modify the real DOM based on the difference between the virtual DOM before and after the update. Note that under stack reconciler, DOM updates are synchronous, that is to say, during the comparison process of virtual DOM, if an instance is found to be updated, the DOM operation will be performed immediately.

Under fiber-conciler, the operation can be divided into many small parts and can be interrupted, so synchronous operation of DOM may lead to inconsistency between fiber-tree and the actual DOM. Synchronize. For each node, it not only stores the basic information of the corresponding element, but also stores some information for task scheduling. Therefore, fiber is just an object, representing the smallest unit of work that can be split during the reconciliation phase, and corresponds one-to-one to the react instance in the above figure. Manage the characteristics of the Instance itself through the stateNode attribute. The next work unit of the current work unit is represented by child and sibling, and return indicates the target to be merged with the returned results after the processing is completed, usually pointing to the parent node. The entire structure is a linked list tree. After the execution of each work unit (fiber) is completed, it will check whether it still has the main thread time slice. If so, continue to the next one. If not, other high-priority transactions will be processed first, and execution will continue until the main thread is free.

fiber {  	stateNode: {},    child: {},    return: {},    sibling: {},
}复制代码

For example

The current page contains a list, through which a button and a group of Items are rendered. The Item contains a div, in which The contents are numbers. By clicking the button, all numbers in the list can be squared. There is also a button that you can click to adjust the font size.

#After the page rendering is completed, a fiber-tree will be initialized and generated. There is no difference between initializing fiber-tree and initializing Virtual DOM tree, so I won’t go into details here.

At the same time, react will also maintain a workInProgressTree. workInProgressTree is used to calculate updates and complete the reconciliation process.

#After the user clicks the square button, setState is called using the squared list of each element, and react will send the current update to the update queue corresponding to the list component. But react will not immediately perform the comparison and modify the DOM operation. Instead, leave it to the scheduler.

#The scheduler will handle this update based on the current usage of the main thread. To implement this feature, the requestIdelCallbackAPI is used. For browsers that do not support this API, react will add pollyfill.

Generally speaking, usually, client threads are divided into frames when executing tasks. Most devices control 30-60 frames without affecting the user experience; between two execution frames, The main thread usually has a short period of idle time. requestIdleCallback can call Idle Callback during this Idle Period (Idle Period) to perform some tasks

• 低优先级任务由requestIdleCallback处理；

• 高优先级任务，如动画相关的由requestAnimationFrame处理；

• requestIdleCallback可以在多个空闲期调用空闲期回调，执行任务；

• requestIdleCallback方法提供deadline，即任务执行限制时间，以切分任务，避免长时间执行，阻塞UI渲染而导致掉帧；

一旦reconciliation过程得到时间片，就开始进入work loop。work loop机制可以让react在计算状态和等待状态之间进行切换。为了达到这个目的，对于每个loop而言，需要追踪两个东西：下一个工作单元（下一个待处理的fiber）;当前还能占用主线程的时间。第一个loop，下一个待处理单元为根节点。

因为根节点上的更新队列为空，所以直接从fiber-tree上将根节点复制到workInProgressTree中去。根节点中包含指向子节点（List）的指针。

根节点没有什么更新操作，根据其child指针，接下来把List节点及其对应的update queue也复制到workinprogress中。List插入后，向其父节点返回，标志根节点的处理完成。

根节点处理完成后，react此时检查时间片是否用完。如果没有用完，根据其保存的下个工作单元的信息开始处理下一个节点List。

接下来进入处理List的work loop，List中包含更新，因此此时react会调用setState时传入的updater funciton获取最新的state值，此时应该是[1,4,9]。通常我们现在在调用setState传入的是一个对象，但在使用fiber conciler时，必须传入一个函数，函数的返回值是要更新的state。react从很早的版本就开始支持这种写法了，不过通常没有人用。在之后的react版本中，可能会废弃直接传入对象的写法。

setState({}, callback); // stack concilersetState(() => { return {} }, callback); // fiber conciler复制代码

在获取到最新的state值后，react会更新List的state和props值，然后调用render，然后得到一组通过更新后的list值生成的elements。react会根据生成elements的类型，来决定fiber是否可重用。对于当前情况来说，新生成的elments类型并没有变（依然是Button和Item），所以react会直接从fiber-tree中复制这些elements对应的fiber到workInProgress 中。并给List打上标签，因为这是一个需要更新的节点。

List节点处理完成，react仍然会检查当前时间片是否够用。如果够用则处理下一个，也就是button。加入这个时候，用户点击了放大字体的按钮。这个放大字体的操作，纯粹由js实现，跟react无关。但是操作并不能立即生效，因为react的时间片还未用完，因此接下来仍然要继续处理button。

button没有任何子节点，所以此时可以返回，并标志button处理完成。如果button有改变，需要打上tag，但是当前情况没有，只需要标记完成即可。

老规矩，处理完一个节点先看时间够不够用。注意这里放大字体的操作已经在等候释放主线程了。

接下来处理第一个item。通过shouldComponentUpdate钩子可以根据传入的props判断其是否需要改变。对于第一个Item而言，更改前后都是1,所以不会改变，shouldComponentUpdate返回false，复制div，处理完成，检查时间，如果还有时间进入第二个Item。

第二个Item shouldComponentUpdate返回true，所以需要打上tag，标志需要更新，复制div，调用render，讲div中的内容从2更新为4，因为div有更新，所以标记div。当前节点处理完成。

For the above situation, the div is already a leaf node and does not have any sibling nodes, and its value has been updated. At this time, the effect generated by the change of this node needs to be merged into the parent node. At this time, react will maintain a list that records all elements that produce effects.

After merging, return to the parent node Item, and the parent node marking is completed.

The next unit of work is Item. Before entering Item, check the time. But this time time ran out. At this point react must swap the main thread and tell the main thread to allocate time to it in the future to complete the remaining operations.

The main thread next performs the operation of enlarging the font. After completion, execute the next operation of react, which is almost the same as the processing process of the previous Item. After the processing is completed, the entire fiber-tree and workInProgress are as follows:

After completion, the Item List returns and merges the effect. The effect List now looks like this:

At this time, the List returns to the root node and merges the effect, and all nodes can be marked as completed. At this time react marks workInProgress as pendingCommit. This means that you can enter the commit stage.

At this point, what we need to do is to check whether the time is enough. If there is no time, we will wait until the time to submit the modification to the DOM. After entering stage 2, reacDOM will update the DOM based on the effect-list calculated in stage 1.

After updating the DOM, workInProgress is completely consistent with the DOM. In order to keep the current fiber-tree and the DOM consistent, react exchanges the current and workinProgress pointers.

In fact, react maintains two trees (Double-buffering) most of the time. This can reduce the time of allocating memory and cleaning up garbage during the next update. After the commit is completed, execute the componentDidMount function.

Summary

By decomposing the reconciliation process into small work units, the page can respond to browser events in a more timely manner. But another problem is still unresolved, that is, if the react rendering currently being processed takes a long time, the subsequent react rendering will still be blocked. That's why fiber reconciler adds a priority strategy.

[Related recommendations: Redis video tutorial]

The above is the detailed content of What is fiber in react. For more information, please follow other related articles on the PHP Chinese website!