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.
  
  

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,
  };

<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>

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"));

{
    $$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,}

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!