The source code for this series of articles is ReactV17

The React architecture

The React @ 16 before

Prior to Act16, the React architecture was roughly divided into two layers:

  • Reconciler: The key responsibility is to compare and find the components that have changed before and after the Reconciler;
  • Renderer: The main responsibility is to render the page based on changes;

The problem

In the Reconciler, the components of mount call mountComponent (), and the components of Update call updateComponent (). Both methods update the child components recursively. The update, once started, cannot be interrupted because it is executed recursively. When the hierarchy is deep and the recursive update time exceeds 16ms, the user interaction freezes.

After the React @ 16

To address this issue, the React team refactored at React@16, introducing a new architectural model:

  • Reconciler: The key responsibility is to compare and find the components that have changed before and after the Reconciler;
  • Renderer: The main responsibility is to render the page based on changes;
  • Scheduler: The main duty is to prioritize tasks and prioritize high-priority tasks;

The new architecture builds on the existing Scheduler, which is implemented by the React team’s reference browser API: requestIdleCallback. Its main function is to schedule update tasks:

  • On the one hand, the current task can be interrupted to perform higher-priority tasks;
  • On the other hand, it can judge the idle time of the browser and give the initiative to the browser at the appropriate time to ensure page performance; And pick up where you left off the next time the browser is idle.

The Fiber structure

You can see the Fiber node properties in the figure belowLet’s add the following code

Function App() {return (<div> I am <span> </span> </div>)}Copy the code

Here is the structure of the corresponding Fiber tree

Each of the above squares has a Fiber node that connects each other via child, return, and Sibling to form a Fiber tree.

Why is the parent pointer called return instead of parent or father? Because as a unit of work, return refers to the next node that the node returns after completing the completeWork (described later in this series). The child Fiber node and its sibling nodes return to their parent node after completing their work, so return is used to refer to the parent node.

Before closing this chapter, I’d like to introduce a few terms in the source code:

  • ReconcilerThe stage of work is calledrenderPhase. Because the component is called at this stagerenderMethods.
  • RendererThe stage of work is calledcommitPhase. Just like when you code a requirement and then execute itgit commitSubmit the code.commitStage will takerenderPhase submitted information is rendered on the page.
  • renderwithcommitThe stages are collectively referred to aswork, i.e.,ReactAt work. Correspondingly, if the task isSchedulerInternal scheduling does not belong towork.

Later on, we will learn about the Reconciler and Renderer workflow, so the chapter names are the Render phase and the Commit phase, respectively.

conclusion

In this article we introduced the Fiber architecture. The content of this article is not much, but it will serve as a guide for the following articles, and then we will implement render, commit, diff algorithm, hooks. I have just learned react source code, and I hope to make a record to consolidate these contents.