Function and principle of react fiber

Time:2021-10-19

Warehouse address of complete high frequency question bank:https://github.com/hzfe/aweso…

Complete high frequency question bank reading address:https://febook.hzfe.org/

Related issues

  • What is fiber
  • Talk about what you know about fiber
  • What impact does fiber have on the use of react

Answer key points

dispatch Depth first traversal

Fiber is a new reconciliation engine adopted in react 16. Its main goal is to support progressive rendering of virtual dom.

Fiber replaces the original stack reconciler with fiber reconciler, which improves the responsiveness and performance of complex applications. The objectives are achieved mainly through the following ways:

  • Fragmentation of large and complex tasks.
  • Prioritize tasks and schedule high priority tasks first.
  • During scheduling, tasks can be suspended, resumed, terminated, etc.

Impact of fiber on existing code: because fiber adopts a new scheduling method, the task update process may be interrupted, which means that render and its previous lifecycle functions may be called multiple times during the component update process. Therefore, there should be no side effects in the following life cycle functions.

  • shouldComponentUpdate
  • Obsolete hooks have been declared in react 16
  • componentWillMount(UNSAFE\_componentWillMount)
  • componentWillReceiveProps(UNSAFE\_componentWillReceiveProps)
  • componentWillUpdate(UNSAFE\_componentWillUpdate)

In depth knowledge

1. How does react work

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return <div>Hello, HZFE.</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

The two packages we introduced in the above code represent the core API layer and rendering layer of react, respectively. Behind them, there is a layer called coordinators. (the coordinator is implemented in react reconciler)

The rendering of a react component mainly goes through two stages:

  • Scheduling phase: generate a new tree with new data, and then traverse the old tree through the diff algorithm to quickly find the elements to be updated and put them into the update queue to get a new update queue.
  • Render stage: traverse the update queue and actually update the elements corresponding to the rendering by calling the API of the host environment. Host environment, such as DOM, native, etc.

For the scheduling phase, there are different processing methods in the new and old architectures:

Before react 16, stack coordinator was used to create virtual DOM in a recursive way. The recursive process cannot be interrupted. If the level of the component tree is very deep, and the time for recursively updating components exceeds 16ms, the user interaction will feel stuck.

Function and principle of react fiber

Source: react conf 17

React 16 and later uses fiber coordinator to reconstruct the non interruptible update in recursion into an asynchronous interruptible update process in iteration, so as to better control the rendering of components.

Function and principle of react fiber

Source: react conf 17

2. How does fiber reconciler work

Because the running environment of JS in the browser is single threaded, once a task takes too long, it will block the execution of other tasks, resulting in the browser unable to respond to the user’s operations in time, resulting in a decline in the user experience. To solve this problem, react introduced the fiber reconciler architecture.

In fiber, a long-time task is divided into many small task pieces, and the running time of each task piece is very short. Although the overall task execution time is still very long, after each task piece is executed, it will give other tasks an opportunity to execute. In this way, the only thread will not be exclusive, and other tasks can be executed.

In order to achieve the purpose of progressive rendering, a new data structure is introduced into fiber architecture: fiber node. Fiber node tree is generated according to react element tree and used to drive the rendering of real dom.

Approximate structure of fiber node:

{
    tag:   TypeOfWork,  //  identification   fiber   type
    type:  ' div',  //  and   fiber   Related component types
    return:   Fiber  |  null,  //  Parent node
    child:   Fiber  |  null,  //  Child node
    sibling:   Fiber  |  null,  //  Peer node
    alternate:   Fiber  |  null,  //  diff   The changes are recorded on this node
    ...
}

The fiber tree structure is as follows:

Function and principle of react fiber

Source: react conf 17

Main workflow of fiber:

  1. ReactDOM.render()Boot react to start or callsetState()Start creating or updating the fiber tree when.
  2. Traverse the fiber node tree from the root node, and build the wokeinprogress tree (reconciliation phase).
  • This phase can be suspended, terminated, and restarted, which will lead to repeated execution of react related life cycles.
  • React will generate two trees, one is the current tree representing the current state, and the other is the workinprogress tree to be updated.
  • Traverse the current tree, reuse or update the fiber node to the workinprogress tree, and the current tree will be replaced after the workinprogress tree is completed.
  • When a node is updated, the effect list corresponding to the node is generated at the same time.
  • Create an update task for each node.
  1. Add the created update task to the task queue and wait for scheduling.
  • Scheduling is completed by the scheduler module, whose core responsibility is to execute callback.
  • The scheduler module implements a cross platform compatible requestidlecallback.
  • Each time a fiber node update is processed, it can be interrupted, suspended, or restored.
  1. Update the DOM according to the effect list (commit phase).
  • React will traverse the effect list and update all changes to the DOM at one time.
  • This phase of work will lead to changes visible to the user. Therefore, the process cannot be interrupted and must be performed until the update is completed.

React scheduling flow chart:

Function and principle of react fiber

reference material

  1. React Fiber Architecture
  2. React Conf 2017
  3. Inside Fiber