This is the 18th day of my participation in the August Challenge

What is the fiber

Fiber refers to the tasks that a component will or has completed. Each component can have one or more tasks.

Why we need Fiber

For large projects, the component tree will be very large, so the cost of recursive traversal will be very high, which will cause the main thread to be continuously occupied. The result is that the layout, animation and other periodic tasks on the main thread cannot be processed immediately, resulting in visual lag, affecting the user experience, in order to deal with the CPU bottleneck problem.

The advantages of the 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
  • More fluid

The meaning of the fiber

  • As an architecture, beforeReact15theReconcilerExecuted recursively, the data is stored in the recursive call stack, so it is calledstack Reconciler.React16theReconcilerBased on theFiber nodeThe implementation is calledFiber Reconciler.
  • As a static data structure, eachFiber nodeCorresponds to aReact element, saving the type of the component (function component/class component/native component…) And corresponding DOM nodes.
  • 1 as dynamic units of work, eachFiber nodeSave the changed state of the component in this update, the work to be done (need to be removed/inserted/updated…)

The structure of the fiber

You can see the definition of the Fiber node’s properties here.

function FiberNode( tag: WorkTag, pendingProps: mixed, key: null | string, mode: TypeOfMode,) {// This. Tag = tag; this.key = key; this.elementType = null; this.type = null; this.stateNode = null; // This. Return = null; this.child = null; this.sibling = null; this.index = 0; this.ref = null; // This. PendingProps = pendingProps; this.memoizedProps = null; this.updateQueue = null; this.memoizedState = null; this.dependencies = null; this.mode = mode; this.effectTag = NoEffect; this.nextEffect = null; this.firstEffect = null; this.lastEffect = null; This. Lanes = NoLanes; this.childLanes = NoLanes; // Point to the corresponding fiber this. Alternate = null; }Copy the code

conclusion

Fiber is the new coordination engine in React 16. Its main purpose is to enable incremental rendering of the Virtual DOM. An update process may be interrupted, so the React Fiber update process is divided into two phases: the first Phase Reconciliation Phase and the second Commit Phase.