web-dev-qa-db-fra.com

Qu'est-ce que l'attribut data-reactid en html?

En parcourant le code HTML de certaines pages, j'ai remarqué que certaines d'entre elles utilisaient cet attribut "data-reactid" comme:

 <a data-reactid="......" ></a>

Quel est cet attribut et quelle est sa fonction?

javascripthtmlreactjs
89
Ayman El Temsahi

L'attribut data-reactid est un attribut personnalisé utilisé pour que React puisse identifier de manière unique ses composants dans le DOM.

Ceci est important parce que React applications peuvent être restituées sur le serveur ainsi que sur le client. En interne, React construit une représentation des références aux noeuds DOM qui composent votre application (la version simplifiée est présentée ci-dessous).

{
  id: '.1oqi7occu80',
  node: DivRef,
  children: [
    {
      id: '.1oqi7occu80.0',
      node: SpanRef,
      children: [
        {
          id: '.1oqi7occu80.0.0',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}

Il n’existe aucun moyen de partager les références d’objet réelles entre le serveur et le client et l’envoi d’une version sérialisée de l’arborescence des composants dans son intégralité est potentiellement coûteux. Lorsque l'application est restituée sur le serveur et que React est chargé sur le client, ses seules données sont les attributs data-reactid.

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

Il doit être capable de reconvertir cela dans la structure de données ci-dessus. Pour ce faire, il utilise les attributs uniques data-reactid. Cela s'appelle et gonfle l'arborescence des composants.

Vous remarquerez peut-être aussi que si React est rendu côté client, il utilise l'attribut data-reactid, même s'il n'est pas nécessaire de perdre ses références. Dans certains navigateurs, il insère votre application dans le DOM à l'aide de .innerHTML puis gonfle immédiatement l'arborescence des composants, ce qui améliore les performances.

L’autre différence intéressante est que les identifiants React id du côté client auront un format d’entier incrémental (comme .0.1.4.3), alors que ceux rendus par le serveur seront préfixés par une chaîne aléatoire (telle que .loqi70ccu80.1.4.3). Cela est dû au fait que l'application peut être rendue sur plusieurs serveurs et qu'il est important d'éviter les collisions. Du côté client, il n’existe qu’un seul processus de rendu, ce qui signifie que des compteurs peuvent être utilisés pour garantir des identifiants uniques.

React 15 utilise document.createElement à la place , ainsi le balisage rendu par le client n'inclura plus ces attributs.

125
Dan Prince

C'est un attribut HTML personnalisé, mais il est probablement utilisé dans ce cas par la bibliothèque Facebook React JS.

Jetez un coup d'œil: http://facebook.github.io/react/

35
Samuel G. P.

Attribut Données personnalisées en HTML5

J'aimerais citer le commentaire de Ian dans ma réponse:

C'est juste un attribut (valide) sur l'élément que vous pouvez utiliser pour stocker des données/informations à ce sujet.

Ce code le récupère ensuite dans le gestionnaire d'événements et l'utilise pour rechercher l'élément de sortie cible. Il stocke effectivement la classe de la div où son texte doit être sorti.

reactid est juste un suffixe, vous pouvez avoir n'importe quel nom ici, par exemple: data-Ayman.

Si vous voulez trouver la différence, vérifiez les fiddles dans ce SO réponse et commentaire .

11
Praveen

les attributs de données sont couramment utilisés pour diverses interactions. Typiquement via javascript. Ils n’affectent en rien le comportement du site et constituent une méthode pratique pour transmettre des données à quelque fin que ce soit. Voici un article qui pourrait éclaircir les choses:

http://ejohn.org/blog/html-5-data-attributes/

Vous pouvez créer un attribut de données en préfixant data- à toute chaîne sécurisée d'attribut standard (alphanumérique, sans espaces ni caractères spéciaux). Par exemple, data-id ou dans ce cas data-reactid

3
Kai Qing

C'est l'attribut de données HTML. Voir ceci pour plus de détail: http://html5doctor.com/html5-custom-data-attributes/

Fondamentalement, il s'agit simplement d'un conteneur de vos données personnalisées tout en rendant le code HTML valide. C'est data- plus un identifiant unique.

3
Ben Gulapa