React source code

3.Fiber(I’m dom in memory)

Video lessons & Debug demos

The purpose of the video course is to quickly master the process of running the React source code and scheduler, Reconciler, Renderer, Fiber, etc., in react, and debug the source code and analysis in detail to make the process clearer.

Video course: Enter the course

Demos: demo

Course Structure:

  1. You’re still struggling with the React source code.
  2. The React Mental Model
  3. Fiber(I’m dom in memory)
  4. Start with Legacy or Concurrent (start at the entrance and let’s move on to the future)
  5. State update process (what’s going on in setState)
  6. Render phase (awesome, I have the skill to create Fiber)
  7. Commit phase (I heard renderer marked it for us, let’s map real nodes)
  8. Diff algorithm (Mom doesn’t worry about my Diff interviews anymore)
  9. Function Component saves state
  10. Scheduler&lane model (to see tasks are paused, continued, and queue-jumped)
  11. What is concurrent mode?
  12. Handwriting mini React (Short and Sharp is me)

React15 is unbreakable in reconcilations during the render phase, which can cause gridlock in large DOM reconcilations because all browser time is in JS execution and JS execution is single threaded. Therefore, after REact16, scheduler schedules time slices, giving each task a certain amount of time. If the execution is not completed within this time, the execution right is also handed over to the browser for drawing and rearranging. Therefore, asynchronous and interruptible update requires a certain data structure in memory to store DOM information. This data structure is Fiber (virtual DOM).

Fiber data structure

Fiber has the following built-in properties:

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // Save the node information
  this.tag = tag;// The type of the corresponding component
  this.key = key;/ / the key attribute
  this.elementType = null;// Element type
  this.type = null;/ / func or class
  this.stateNode = null;// Real DOM node

  // Connect to fiber tree
  this.return = null;// point to the parent node
  this.child = null;/ / points to the child
  this.sibling = null;// point to sibling nodes
  this.index = 0;

  this.ref = null;

  // to calculate state
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;
    
	/ / is related to the effect
  this.effectTag = NoEffect;
  this.nextEffect = null;
  this.firstEffect = null;
  this.lastEffect = null;

  // Priority-related attributes
  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  // Current and workInProgress Pointers
  this.alternate = null;
}

Copy the code

Fiber double cache

Now we know that Fiber stores the real DOM. The real DOM corresponds to the Fiber node in memory and forms a Fiber tree. The react tree is called the current Fiber tree. The Fiber tree under construction is called workInProgress Fiber, and the nodes of the two trees are connected through alternate.

function App() {
  return (
    <div>
      xiao
      <p>chen</p>
    </div>
  )
}

ReactDOM.render(<App />.document.getElementById("root"));
Copy the code

  • On mount: fiberRoot and rootFiber are created, then Fiber nodes are created based on the JSX object and connected to the Current Fiber tree.

  • When the update: A Fiber tree called workInProgress will be formed based on the JSX (the render or FuncComponent return value of ClassComponent) and current Fiber (diff algorithm). Then point fiberRoot’s Current to the workInProgress tree, and the workInProgress becomes Current Fiber.

    FiberRoot: Indicates only one root node of the entire application

    RootFiber: Reactdom. render or reactdom. unstable_createRoot An application can have multiple nodes.

We now know that there are two Fiber trees, current Fiber and workInProgress Fiber, and Fiber double cache refers to, In Reconcile (diff), a new workInProgress Fiber is formed and then the workInProgress Fiber is switched to current Fiber and applied to the real DOM. The advantage of having two fibers is to form a view description in memory. In the end, it is applied to the DOM to reduce the dom operation.

Now look at the Fiber dual cache creation process:

The mount when:

1. Initially, only fiberRoot and rootFiber nodes are created

2. Then create workInProgress Fiber according to JSX:

3. Switch the workInProgress Fiber to Current Fiber

When the update:

1. Create a workInProgress Fiber based on current Fiber

2. Switch the workInProgress Fiber to Current Fiber