Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”. This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

React17 React17 React17 React17 React17 React17

Learn react source code, first of all, the react source code and the entire architecture have a general understanding, this will be learned with half the effort. This chapter introduces the react source code and architecture.

Source directory

The react source directory contains three folders:

  • Fixtures: A measure of the test demo for the REACT code
  • React packages: React
  • Script: Commands related to react packaging, compiling, and local development

The source content we will explore is stored in the Packages folder:

📦react ┣ 📂fixtures ┣ service packages medicare create-subscription ┃ 📦 dom-event-testing-library ┃ 📂 eslint - plugin - react - hooks ┃ ┣ 📂 jest mock - the scheduler ┃ ┣ 📂 jest - react ┃ ┣ 📂 react ┃ ┣ 📂 react - art ┃ ┣ 📂 react - cache ┃ ┣ 📂 react - client ┃ ┣ 📂 react - debug - tools ┃ ┣ 📂 react - devtools ┃ ┣ 📂 react - devtools - core ┃ ┣ 📂 react - devtools - extensions ┃ ┣ 📂react-devtools-inline ┃ ┣ 📂react-devtools-scheduling-profiler ┃ 📂react-devtools-shares open service inner service ┣ 📂react-devtools-inline ┣ 📂react-devtools-scheduling open service inner service inner service inner service 📂 react - devtools - shell ┃ ┣ 📂 react - dom ┃ ┣ 📂 react - fetch ┃ ┣ 📂 react - interactions ┃ ┣ 📂 react - is ┃ ┣ 📂 react - native - the renderer ┃ ┣ 📂 react - it - the renderer ┃ ┣ 📂 react - the reconciler ┃ ┣ 📂 react - refresh ┃ ┣ 📂 react - server ┃ ┣ 📂react-test-renderer ┃ ┣ 📂react-transport-dom-relay ┃ ┣ react-transport-dom-webpack Inner Mongolia react-transport-dom-webpack Inner Mongolia Mongolia weight shared outer neighbourhood 📂 use - subscription ┗ 📂 scriptsCopy the code

I divide packages into modules based on the functionality of the following parts:

Core API

The React core apis are located in the Packages/React folder, including createElement, Memo, Context, and hooks. All apis imported through the React package are located in this folder.

Scheduling and coordination

Scheduling and coordination are the core features of react16 Fiber since its inception, and their associated packages are as follows:

  • Scheduler: Tasks are scheduled and sorted according to priority
  • React-conciler: The diff algorithm is correlated, and fiber is marked for side effects

Apply colours to a drawing

Render related content includes the following directories:

  • React-art: render content such as canvas and SVG
  • React-dom: render in the browser environment, which is the main package we’ll cover in this series
  • React-native renderer: Used for rendering in native environments
  • React-noop-renderer: Used to debug environment rendering

Auxiliary package

  • Shared: Defines the react public methods and variables
  • React-is: type judgment in react

other

The other packages don’t have much to do with this react source exploration, so I won’t cover them more.

The react architecture

With the React source directory in mind, let’s take a look at the React architecture and see how react updates render pages when variables change.

React The update process after React16 is divided into render and commit phases to ensure smooth rendering. The Render phase includes Scheduler and Reconciler, and the COMMIT phase includes Renderer:

JSX conversion

The JSX syntax is not native JS syntax. The JSX syntax is not native JS syntax. So first you need to do a syntactic transformation of JSX into native JS statements that the browser can execute.

scheduler

The page is about to be rendered when it is first rendered or when the component state is updated, etc. The Scheduler process prioritizes many tasks, making each frame of the browser perform high-priority tasks (such as animations and user input events) first, thus preventing react update tasks from affecting user interaction too much and ensuring page smoothness.

reconciler

In the reconciler process, renewal tasks begin to be carried out according to priorities. This process is mainly to build a new Fiber tree according to the latest state, diff comparison with the previous fiber tree, marking different side effects of fiber nodes, corresponding to the increase, deletion and change of the real DOM during rendering. (If you don’t know anything about Fiber and Diff, you’ll get a general idea of how react works.)

commit

In the Render phase, you end up with an array of EffectLists that record additions, deletions, and replacements to the real DOM of the page, as well as some event responses. The commit updates the real page based on the effectList to make the page change.

This is basically the architecture of the React update process. Details will be explained in a later chapter. Welcome to this column.