This article learns React source code, according to each stage of the source debugger learning.

Here is how to call debugger locally: github.com/sunkuangdon…

React /build/node_modules/react-dom/ CJS /react-dom.development.js /node_modules/react-dom/ CJS /react-dom.development.js

This is also my self-study project, there may be remarks later, if you feel wrong, you can comment to me, or explain in the remarks, I will see.

I hope your remarks are in the format of: /* name: point out the error */, thank you

Source directory structure

Let’s start with the following:

  • How is the directory structure of source code divided
  • Where is the scheduler/renderer/coordinator directory

Top-level directory

The React source top directory is divided into three folders:

├─ a fixtures # Contains minor React test project for contributors ├─ packages # Contains metadata (package.json) and source code for the React project Pack age ├─ scripts # Scripts for various toolchains, such as Git, Jest, ESLint, etcCopy the code

First let’s look inside the Packages folder:

  • React file: It contains a lot of platform-independent code.
  • For example, react.Children, react.component.react.usestate, etc. (you can see it in index.js)

  • Scheduler file: Scheduler related code

  • React-reconciler files: Reconciler-related code

  • React-dom file: renderer code
  • The API for root DOM manipulation is here

  • Shared folder: Code for public methods

  • React-reconclier folder: Experimental packs
  • Although experimental, many of the internal features are not yet available. However, he interconnects with Scheduler and Renender of different platforms at the same time.

First screen rendering process

Let’s take a look at the React architecture in the browser call stack:

  • Run our a-React-Demo project, open the debug tool in your browser and go to the Performance panel
  • It starts out blank, click the button down here, refresh the browser, and hit Stop

  • First find the entry function for our first screen rendering
  • / SRC /index.js with render in it, which is the entry point for the first render
  • The entire render call stack is the first render call flow

  • This process and functionality can be broadly divided into three parts
  • Work from left to right: scheduler, coordinator, renderer

The scheduler render

  • Part 1: Create a Fiber node

  • Here is a function called createFiber

  • Let’s set a breakpoint to see if createFiber creates a Fiber node: FiberNode
  • This is where the createFiber declaration is, everything else is called

  • After refreshing the page, we can enter the function
  • You can see the values of function parameters

  • What does tag:3 mean? View his upper function from the right call stack
  • The createHostRootFiber function is used to create FiberNode

  • Who created the only root Fiber node? Where is current?
  • Look at the following code:
  • New FiberRootNode(containerInfo, Tag, Hydrate) creates a FiberRootNode
  • Root. Current = uninitializedFibe; FiberRootNode Current points to FiberNode

Now that the root Fiber node is ready, the first screen is rendered to the page.

  • UnbatchedUpdates in version 16 has been changed to the red box below, it is too long to play, hahaha

  • ScheduleUpdateOnFiber: This is where the update is scheduled.

  • Once the schedule is successful, the update is executed from the root node, as shown in the following figure.

  • The process for creating workInProgress is divided into two stages: recursive and recursive
  • The recursion stage is beginWork, and the return stage is the completeWork

  • At this point, the entire execution of renderRootSync is the execution of the coordinator
  • The phase in which the coordinator is executed is called the Render phase
  • The renderer workflow is called the COMMIT phase

  • The main purpose of the renderer’s work is to render the changing stages onto the view

conclusion

How the Render phase works, and what are the important functions that work with it? We’ll talk more about what these functions do, which corresponds to our Fiber tree.

JSX will be covered first in the next installment, starting with the Render phase. Thank you for your support