This is the first day of my participation in the August Challenge. For details, see:August is more challenging

This article is based on the latest stable version V17.0.2

In the previous section (the React application’s macro package structure), the React core package dependencies and call relationships are introduced and an overview is drawn. In the overview diagram, you can see that there are two large loops in the Scheduler and React-Reconciler packages:

In this paper, the two loops are expressed as the task scheduling loop and the fiber construction loop respectively. Next, from a macro perspective, the role of these two cycles, as well as the differences between them and the connection. More in-depth source analysis is explained in the scheduler scheduling mechanism and Fiber tree construction sections respectively.

  1. Task scheduling loop

The source code is located in Scheduler.js, which is what keeps the React application running. It needs to be called in a loop to control the scheduling of all tasks.

  1. Fiber structural cycle

The source code is located in ReactFiberWorkloop.js, which controls the construction of the fiber tree, and the whole process is a depth-first traversal.

The js source code for these two loops is different from other closures (which are closures at runtime) in that the global variables defined are not only private variables in the scope, but are also used to control the react application execution.

Distinguished from connection

  1. The difference between

    • Task scheduling loopBased onBinary heapIs a data structure (seeReact algorithm heap sort), and execute the loopThe heapThe vertex of PI, all the way toThe heapBe cleared.
    • Task scheduling loopThe logic is macro, it schedules each task (task), regardless of what the task is (or even what the task isSchedulerPackage fromreact), the specific task is to perform the callback functionperformSyncWorkOnRootorperformConcurrentWorkOnRoot.
    • Fiber structural cycleBased onThe treeIs a data structure, performing a depth-first traversal from top to bottom (seeDepth first traversal of react algorithm).
    • Fiber structural cycleThe logic is biased towards concrete implementation, which is just tasks (taskPart of STHperformSyncWorkOnRootInclude:fiberThe structure of the tree,DOMRender, schedule detection), only responsible forfiberThe structure of trees.

  2. contact

    • Fiber structural cycleisTask scheduling loopIn the task (taskThey are dependencies, and each task reconstructs onefiberThe tree.

The main logic

Based on the above description, the division of labor of the two cycles can be summarized as follows: the large cycle (task scheduling cycle) is responsible for scheduling tasks, while the small cycle (fiber construction cycle) is responsible for implementing tasks.

The backbone logic that React runs, the core step of converting input to output, is actually built around these two work loops.

In conjunction with the macro overview diagram above, which shows the calling relationships between core packages, the backbone logic that React runs can be summarized:

  1. Input: Each update (such as adding, deleting, or modifying a node) is considered as oneUpdate the demandThe purpose is to updateDOMNode).
  2. To register a scheduling task:react-reconcilerreceivedUpdate the demandAfter that, it’s not constructed immediatelyFiber treeInstead, go to the dispatch centerschedulerSign up for a new tasktask, i.e., theUpdate the demandConvert to atask.
  3. Execute scheduling tasks (output): scheduling centerschedulerthroughTask scheduling loopTo perform thetask(taskThe execution process of thereact-reconcilerIn the package).
    • Fiber structural cycleistaskWhen the loop is complete, the latest Fiber tree is constructed.
    • commitRootistaskTo render the latest fiber tree to the page,taskTo complete.

The backbone logic is the input-output link. For better performance (batch updates, interruptible rendering, etc.) react uses a number of optimizations on the input-output link, such as the task scheduling loop and the Fiber construction loop described in this article to work together to achieve interruptible rendering.

conclusion

This section describes, from a macro perspective, the two main working cycles in react source code. The React-Reconciler and Scheduler packages are a lot of code and logical complexity, but most of them actually serve this trunk. Knowing these two loops makes it easier to understand react’s overall operational link.

Write in the last

This article belongs to the basic concept plate in the react source code series diagram, this series of nearly 20 articles, not for the interview, really is to understand the React source code, and then improve the architecture and coding ability.

The first draft of the graphic section has been completed and will be updated in August after correction. If there are any errors in the article, github will correct them as soon as possible.