What does react element mean?

react element is the return value of the "React.createElement" function, that is, ReactElement; the structure of ReactElement is "const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props, _owner: owner, };".

The operating environment of this tutorial: Windows 10 system, react16.9.0 version, Dell G3 computer.

What does react element mean?

React source code | ReactElement

Speaking of ReactElement, what I have to mention is the language used to replace JavaScript (JS) in React, JSX .

JSX

As the official designated syntax of React, JSX allows users to insert HTML code in JS code. However, this way of writing cannot be parsed by the browser. They need a converter, and Babel plays such a role. It converts the JSX code into a JS file when it is compiled, so that the browser can parse it.

How to convert? We know that JSX has two writing methods: JS and HTMl. If it is written in JS, it does not need to be converted. Of course, it cannot be said so absolutely. Sometimes Babel will do it for compatibility. For this reason, translating the grammar from a higher version to a lower version is beyond the scope of discussion. What we need to pay attention to is actually the way HTMl is processed.

For example, this line of code:

<div id=&#39;name&#39;>Tom and Jerry</div>

The code generated after conversion by Babel is:

React.createElement("div", {
    id: "name"}, "Tom and Jerry");

HTML syntax transformation It became JS syntax. Simply put, the JSX we wrote eventually became JS.

Let’s write a more complicated example:

<div class=&#39;wrapper&#39; id=&#39;id_wrapper&#39;>
    <span>Tom</span>
    <span>Jerry</span></div>React.createElement("div", {
    class: "wrapper",
    id: "id_wrapper"
}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

The conversion rule is relatively simple. The first parameter of React.createElement is the node type; the second parameter It is an attribute of the node, in the form of key:value as an object, and all subsequent parameters are the child nodes of the node.

It should be noted that in JSX syntax, we not only have native HTML nodes, but also a large number of custom components, such as:

function Comp() {
    return '<div>Tom and Jerry</div>'
}

<Comp></Comp>
function Comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement(Comp, null);

As you can see , the first parameter of React.createElement becomes a variable instead of a string. Try to lowercase the first letter of the function Comp:

function comp() {
    return '<div>Tom and Jerry</div>'
}

<comp></comp>
function comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement("comp", null);

The first parameter of React.createElement It becomes a string again.
This is why when we write components in React, we require the first letter to be capitalized. When compiling, Babel will treat components with lowercase letters as native HTMl nodes for processing. If we customize If the first letter of a component is lowercase, subsequent programs will not be able to recognize this component and will eventually report an error.

ReactElement

The function React.createElement appears frequently in the JS code compiled by Babel. The return value of this function is ReactElement. As can be seen from the above example, the React.createElement function has three input parameters, or three categories.

• type
  type refers to the type of this ReactElement.
  

• String such as div, p represents the native DOM, called HostComponent

• Class The type is the component we inherit from Component or PureComponent, called ClassComponent

• The method is functional Component

• The natively provided Fragment, AsyncMode, etc. Symbol will be treated specially

• ##config

  Refer to the code compiled by Babel above, all nodes The attributes will be placed in the config object in the form of Key:Value.
  
  

• children

  There will be more than one child node, so there is not only one children. All parameters from the second parameter onwards are children, which is an array.
  
  

The structure of ReactElement is like this

const element = {
    // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.    _owner: owner,
  };

It is a simple object. In order to see clearly the creation rules of this object, Let's give an example. The first is the JSX we wrote:

<div class=&#39;class_name&#39; id=&#39;id_name&#39; key=&#39;key_name&#39; ref=&#39;ref_name&#39;>
    <span>Tom</span>
    <span>Jerry</span>
</div>

It will be compiled by Babel into:

React.createElement("div", {
    class: "class_name",
    id: "id_name",
    key: "key_name",
    ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

It will generate such an Element

{
    $$typeof: REACT_ELEMENT_TYPE,
    type：'div'，
    key: 'key_name',
    ref: "ref_name",
    props: {
        class: "class_name",
        id: "id_name",
        children: [
            React.createElement("span", null, "Tom"),
            React.createElement("span", null, "Jerry")
        ]
    }
     _owner: ReactCurrentOwner.current,}

• $$typeof is a constant, and all elements generated by React.createElement have this value. Generally, components using React are hung on this.props.children of the parent component, but there are exceptions. For example, if you want to implement a modal box, you need to mount the modal box under the body node. In this case, you need to use ReactDOM. The createPortals(child, container) function is implemented. The $$typeof value generated by this function is REACT_PORTAL_TYPE.
  

• type refers to the type of this ReactElement
  

• key and ref are special configurations found in the config object , extract it separately and place it under ReactElement
  

• #props contains two parts. The first part is the config with key and ref removed, and the second part is the children array. The members of the array are also objects generated through React.createElement. This step is omitted in the example.
  

• _owner is Fiber in the 16.7 version. Fiber is the core of the react16 version, so we won’t go into details for the time being.
  

Through this article, we learned that HTML nodes in JSX are converted into nested ReactElement objects with the help of Babel. This information is useful for later building applications. The tree structure is very important, and React breaks away from the limitations of the platform by providing these types of data.

Recommended learning: "react video tutorial"

The above is the detailed content of What does react element mean?. For more information, please follow other related articles on the PHP Chinese website!