This is the 13th day of my participation in Gwen Challenge

background

Fiber is a refactoring of the core algorithm of React. The core goal of refactoring is to increase applicability and include animation, layout, and gestures. Its objectives include:

  • Break up interruptible tasks into smaller tasks
  • Reorder the tasks in progress, optimize the order of execution, and utilize the results of the last calculation.
  • Gracefully switch between parent and child tasks to support layout refreshes during React execution
  • Better support for Error boundary
  • Support render() to return multiple elements

Since the original intention is not to allow JS to execute for long periods of time without control (manual scheduling is preferred), why does JS execution for long periods of time affect interactive responses and animations?

Because JavaScript runs on the main thread of the browser, it happens to run with style calculation, layout, and, in many cases, drawing. If the JavaScript runs for too long, it blocks this other work and can cause frames to drop.Copy the code

Key features of Fiber

  • Incremental rendering (splitting the render task into chunks and dividing it into multiple frames)
  • Ability to pause, terminate, and reuse rendering tasks when updating
  • Assign priority to different types of updates
  • New basic capabilities in concurrency

Incremental rendering is used to solve the problem of losing frames by splitting the rendering tasks into small chunks at a time, and then giving control of time back to the main thread as opposed to long chunks. This strategy is called cooperative Scheduling.

Fiber and fiber tree

The React runtime has three instances:

DOM Actual DOM node ------- Instances React Maintained vDOM tree node ------- Elements Description how the UI looks (type, props)Copy the code

Instances are created based on Elements and are abstract representations of components and DOM nodes. VDOM Tree maintains component state and the relationship between components and the DOM tree

The vDOM tree is built in the first rendering process, and when it needs to be updated later (setState()), diff vDOM tree obtains DOM change and applies the DOM change (patch) to the DOM tree

The top-down, recursive mount/update of the reconciler before Fiber, known as Stack Reconciler, cannot be interrupted (continuously occupying the mainline), so that periodic tasks such as layout, animation, and interactive responses on the mainline cannot be dealt with immediately and affect the experience

Fiber solved this problem by breaking up the render/update process (recursive diff) into a series of small tasks, checking a small part of the tree at a time to see if there is time to move on to the next task, continuing if there is, suspending yourself if there is not, and continuing when the main thread is not busy

The incremental update required more context information than the previous vDOM tree, so we extended the Fiber tree. The update process is to construct a new Fiber Tree (workInProgress Tree) based on the input data and the existing fiber tree. Therefore, the Instance layer adds these instances:

DOM real DOM node ------- effect There is an effect list on each workInProgress tree node to store diff results. Merge effect will be performed upward after the current node is updated - - - - workInProgress The workInProgress tree is a snapshot of the current progress created from fiber Tree during the Reconcile process. Used for breakpoint recovery ---- Fiber Fiber tree similar to vDOM tree, used to describe the context information required for incremental updates ------- Elements Describes what the UI looks like (type, props)Copy the code

Note: the two layers on the dotted line are temporary structures that are only useful for updates and are not maintained on a daily basis. “Effect” refers to side effect, including the DOM change to be done

The main structure of each node on the Fiber tree (each node is called fiber) is as follows:

{stateNode, child, return, sibling,... } return indicates to whom the result list should be submitted after the current node finishes processing.Copy the code