One, the introduction

In this series of articles, I will try my best to use flat thinking and reasonable order to help you analyze how React works. However, it is still assumed that readers have the most basic development experience and knowledge. Specific conditions are as follows:

  • Developed at least one full project based on React.
  • Familiar with standard JS basics.
  • Understand appropriate design patterns
  • Understand the appropriate data structures, or at least what a stack is and what a queue is.

As long as the above conditions are met, this series is for you.

Ii. Behind JSX

As you probably know, projects created using create-react-app can write react components or JSX code directly in js files.

Such as:


    const com = <div>12332</div>
    console.log(com);

Copy the code

The create-React-app code, like the one above, can be successfully executed in a browser after being compiled with the webpack included with create-React-app. When we copy this code into the browser window, we will find that the console reported an error.

Simply because native JS does not support THE JSX syntax, that is, the standard JS runtime environment does not allow the writing of HTML tags, js does not have such syntax. The code runs because it’s compiled by Babel.

At the moment, JSX code is mostly translated from @babel/preset- React.

We can open Babel’s playground and see what’s going on behind the scenes.

As you can see, the code running in the browser actually looks like this:


"use strict";

var com = React.createElement("div".null."123123");

Copy the code

123123

is equal to react. createElement(“div”, null, “123123”).

Third, props

The createElement method takes two mandatory arguments and an infinite number of remaining optional arguments. The first argument is the name of the element (string or other type) or other type (more on that later), and the second argument is known as props.

Now we’re going to add a property to div

const com = <div id="123">123123</div>
Copy the code

The compiled

var com = React.createElement("div", {
  id: "123"
}, "123123");
Copy the code

As you can see, the second parameter is null in the case of no prop properties, but becomes a plainObject as soon as any props is passed, such as {id:”123″} above.

After the second argument, the number of arguments is zero to infinite, which is how many children the element has. This is also the nesting of createElement methods.

const com = <div id="123"><span>1</span><span>2</span></div>
Copy the code
var com = React.createElement("div", 
    {
        id: "123"
    }, 
    React.createElement("span".null."1"), 
    React.createElement("span".null."2"));Copy the code

As you can see, the two spans under the div element are also converted to createElements and placed in sequence after the second parameter.

That’s the power of Babel, because most of the tag syntax we write, actually ends up like this. CreateElement should be the most frequently called built-in method.

What about function components and class components?

function AComp() {
    return <div>123</div>
}

const a = <AComp/>
Copy the code
"use strict";

function AComp() {
  return React.createElement("div", null, "123");
}

var a = React.createElement(AComp, null);
Copy the code

We can see that

is converted to React. CreateElement (Acomp, null); . The first argument we pass in at this point is not a string, but the function component we use itself.

Changing AComp from a function to a class component will have the same result. The specific logic will be reflected in the React-DOM, which we’ll talk about later.

Why do components have to start with a capital letter

So let’s change AComp to a lower case name, AComp.

function acomp() { return <div />}

const a = <acomp/>

Copy the code
"use strict";

function acomp() {
  return React.createElement("div", null); } // The first argument is a string"acomp"Var a = react.createElement ("acomp", null);

Copy the code

The first argument to createElement is not acomp itself, but a string. Preset – React converts all lower-case tags to strings that are declared for lower-case elements, which are native DOM elements, such as divs. The function component or class component starts with uppercase.

When we write a component as a lowercase call, we cannot call the exact component we want to call.

Summary of six chapters

Now that we know what JSX and Babel are all about, let’s look at createElement and what’s going on behind it.