Que signifie l'élément de réaction ?

react element est la valeur de retour de la fonction "React.createElement", c'est-à-dire ReactElement ; la structure de ReactElement est "const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props ,_owner : propriétaire, };".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version React16.9.0, ordinateur Dell G3.

Que signifie l'élément de réaction ?

Code source de React | ReactElement

En parlant de ReactElement, ce que je dois mentionner est le langage utilisé pour remplacer JavaScript (JS) dans React, JSX.

JSX

En tant que syntaxe officielle désignée de React, JSX permet aux utilisateurs d'insérer du code HTML dans le code JS. Cependant, cette façon d’écrire ne peut pas être analysée par le navigateur. Ils ont besoin d'un convertisseur, et Babel joue un tel rôle. Il convertit le code JSX en fichier JS lors de sa compilation, afin que le navigateur puisse l'analyser.

Comment convertir ? Nous savons que JSX a deux méthodes d'écriture : JS et HTMl. S'il est écrit en JS, il n'a pas besoin d'être converti. Bien sûr, cela ne peut pas être dit de manière absolue. Parfois, Babel convertira des versions supérieures. par souci de compatibilité, la syntaxe est traduite dans une version inférieure, cette partie dépasse le cadre de la discussion. Ce à quoi nous devons prêter attention, c’est en fait la façon dont le HTML est traité.

Par exemple, la ligne de code suivante :

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

Le code généré après conversion par Babel est :

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

La syntaxe HTML est convertie en syntaxe JS. En termes simples, le JSX que nous avons écrit devient finalement JS.

Écrivons un exemple plus compliqué :

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

La règle de conversion est relativement simple. Le premier paramètre de React.createElement est le type de nœud, le deuxième paramètre est l'attribut du nœud, sous la forme de clé : valeur. En tant qu'objet, tous les paramètres suivants sont des nœuds enfants de ce nœud.

Il est à noter que dans la syntaxe JSX, nous avons non seulement des nœuds HTML natifs, mais aussi un grand nombre de composants personnalisés, tels que :

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

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

React.createElement(Comp, null);

On voit que le premier paramètre de React.createElement devient A variable, au lieu d'une chaîne, essayez en minuscule la première lettre de la fonction Comp :

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

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

React.createElement("comp", null);

Le premier paramètre de React.createElement redevient une chaîne.
C'est pourquoi lorsque nous écrivons des composants dans React, nous exigeons que la première lettre soit en majuscule. Lors de la compilation, Babel traitera les composants avec des premières lettres minuscules comme des nœuds HTMl natifs pour le traitement. les lettres sont en minuscules, les programmes suivants ne pourront pas reconnaître ce composant et finiront par signaler une erreur.

ReactElement

La fonction React.createElement apparaît fréquemment dans le code JS compilé par Babel. La valeur de retour de cette fonction est ReactElement. Comme le montre l'exemple ci-dessus, la fonction React.createElement a trois paramètres d'entrée, ou trois catégories.

• type
  type fait référence au type de ce ReactElement.
  

• Les chaînes telles que div, p représentent le DOM natif, appelé HostComponent

• Le type Classe est le composant dont nous héritons de Component ou PureComponent, appelé ClassComponent

• La méthode est Component fonctionnelle

• Les Fragments, AsyncMode, etc. fournis nativement sont des Symboles et seront spécialement traités

• config
  En vous référant au code compilé par Babel ci-dessus, les attributs de tous les nœuds seront placés dans la config sous la forme de Key:Value dans l'objet.
  

• children
  Il y aura plus d'un nœud enfant, donc il n'y a pas qu'un seul enfant. Tous les paramètres à partir du deuxième paramètre sont des enfants, qui sont un tableau.
  

La structure de ReactElement est comme ça

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

C'est un objet simple Afin de voir clairement les règles de création de cet objet, prenons un exemple. Le premier est le JSX que nous avons écrit :

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

Il sera compilé par Babel en :

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

Il générera un tel 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 est une constante, tous les éléments générés par React.createElement ont cette valeur. Généralement, les composants utilisant React sont suspendus à this.props.children du composant parent, mais il existe des exceptions. Par exemple, si vous souhaitez implémenter une boîte modale, vous devez monter la boîte modale sous le nœud body. , vous devez utiliser ReactDOM. La fonction createPortals(child, containers) est implémentée. La valeur $$typeof générée par cette fonction est REACT_PORTAL_TYPE.
  

• type fait référence au type de ce ReactElement
  

• key et ref sont des configurations spéciales trouvées dans l'objet de configuration. Elles sont extraites séparément et placées sous ReactElement
  

• props contient deux La première partie est. la configuration avec la clé et la référence supprimées, et la deuxième partie est le tableau enfants. Les membres du tableau sont également des objets générés via React.createElement. Cette étape est omise dans l'exemple.
  

• _owner est Fibre dans la version 16.7. La fibre est le cœur de la version React16+, nous n'entrerons donc pas dans les détails pour l'instant.
  

Grâce à cet article, nous avons appris que les nœuds HTML dans JSX sont convertis en objets ReactElement imbriqués à l'aide de Babel. Ces informations sont très importantes pour construire ultérieurement l'arborescence de l'application, et React En fournissant ces types de données, s'éloigner des limites de la plateforme.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!