[email protected] project directory contains 35 packages (@17.0.1 version) under packages. Among them, there are four core packages related to Web development. This series of nearly 20 articles is based on these four packages to develop an in-depth understanding of the internal mechanism of React.

Base package structure

  1. react

    The React Base package, which provides only the functions necessary to define the React component, generally needs to be used with the react-dom or React-native renderer. When writing react application code, most of it calls the API of this package.

  2. react-dom

    The React Renderer is a bridge between react and the Web platform (which can be used in browsers and nodeJS environments) and outputs the results of operations in the React Reconciler to the Web interface. Reactdom.render (
    , document.getelementById (‘root’))). The rest of the API is basically provided by the React package.

  3. react-reconciler

    The core packages that react runs on (coordinate calls and coordination between the React – DOM, React, and Scheduler packages). Manages the input and output of the react application state. Finally, the input signal is converted into output signal and passed to the renderer.

    • Accept input (schedulerUpdateOnFiber),fiberThe tree generation logic is encapsulated in a callback function (involvingfiberTree structure,fiber.updateQueueQueue, harmonic algorithm, etc.),
    • Put this callback function (performSyncWorkOnRootorperformConcurrentWorkOnRoot) intoschedulerschedule
    • schedulerControls the timing of the callback function, and when it completes, you get a brand-new Fiber tree
    • Then call the renderer (e.greact-dom.react-nativeThe fiber tree structure is finally reflected on the interface

  4. scheduler

    The core implementation of the scheduling mechanism controls the execution time of the callback function sent by the React-Reconciler. Task fragmentation can be realized in concurrent mode. Again, when writing react application code, you will rarely directly use the API provided by this package.

    • The core task is to perform callbacks (called byreact-reconcilerProvide)
    • By controlling the execution time of the callback function, the purpose of task sharding is achieved and the interruptible rendering is realized (concurrentThis feature is available only in mode)

Macro overview

Architectural layering

In order to facilitate understanding, react application structure can be divided into two parts: API and core

  1. The React API package is the source of most (not all) oF the apis used during development. There are three basic operations that can normally change the render after React is launched.

    • Class componentsetState()
    • Function component using hook, and initiatedispatchActionTo change the hook object
    • Change the contextsetStateordispatchActionCan be changed)

    The above setstates and DispatchActions are exposed directly by the React package. For React to work, you basically call the React package API to interact with other packages.

  2. Core The entire kernel, consisting of three parts:

    1. The schedulerschedulerPackage, which has only one core responsibility, is to perform callbacks.
      • thereact-reconcilerProvides a callback function wrapped in a task object.
      • Maintain an internal queue of tasks with higher priorities at the top.
      • Cycle the consumption task queue until the queue is empty.
    2. The constructorreact-reconcilerPackage, which has three core responsibilities:
      1. To load the renderer, the renderer must be implementedHostConfigagreement(such as:react-dom) to ensure that the renderer’S API is called correctly when needed to generate the actual node (e.g.domNode).
      2. receivereact-domPackage (for the first timerender) andreactPackage (update latersetState).
      3. willfiberThe tree construction process is wrapped in a callback function that is passed toschedulerThe package awaits dispatch.
    3. The rendererreact-domPackage has 2 core responsibilities:
      1. guidereactThe application is started (PassedReactDOM.render).
      2. implementationHostConfigagreement(The source code is in reactDomHostconfig.js), to be able toreact-reconcilerPackage structurefiberThe tree is represented, dom nodes are generated (in the browser), and strings are generated (SSR).

Note:

  • The criteria for stratification here are not official, because they are notArchitectural layeringTerms like that.
  • This article is only for an in-depth understanding of React. In addition to the official standards, it is decomposed and analyzed to facilitate our understanding of react architecture.

The kernel relationship

Now draw the main responsibilities and calling relationships of the three kernel packages on an overview diagram:

Note:

  • The red square represents the entry function and the green square represents the exit function.
  • The call threads between packages are connected by entry and exit functions between the plates.

Through this overview diagram, we can basically describe the macro structure of React core layer. In the following chapters, we will follow the idea of this diagram to read the corresponding modules one by one.

conclusion

From the perspective of macro architecture, this paper expounds the dependence and invocation relationship between React core packages, so that readers can have a simple understanding of React architecture. Also to provide readers with a reading source code ideas, the first overall browse, and then in-depth analysis, each break.

Write in the last

This article is part of the basic concept plate of the React principles series, 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.