quel est l'attribut data-reactid en html?

93

Alors que je parcourais le HTML de certaines pages, j'ai remarqué que certaines d'entre elles utilisent cet attribut "data-reactid" comme: 

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

Quel est cet attribut et quelle est sa fonction?

javascript  html  reactjs 
— Ayman El Temsahi
source
30
data-reactidest un attribut personnalisé utilisé par la bibliothèque JavaScript React . Qui est développé pour être utilisé avec Facebook et Instagram.
— amit
7
Veuillez noter que toutes les réponses expliquent ce que sont les attributs de date personnalisés et n'expliquent pas ce qu'est data-reactid. Il est utilisé par react pour pouvoir référencer l'objet dom avec l'instance de classe d'élément react.
— adrianj98
2
@ adrianj98, pourquoi n'avez-vous pas posté votre commentaire comme réponse à la place?
— Octopus
3
Je me demande, si Facebook utilise React, pourquoi je ne trouve aucun data-reactid sur leur site?
— PabloRosales

Réponses:

131

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

Ceci est important car les applications React peuvent être rendues aussi bien sur le serveur que sur le client. En interne, React construit une représentation des références aux nœuds DOM qui composent votre application (la version simplifiée est ci-dessous).

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

Il n'y a 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'ensemble de l'arborescence des composants est potentiellement coûteux. Lorsque l'application est rendue sur le serveur et que React est chargé sur le client, les seules données dont il dispose sont les data-reactidattributs.

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

Il doit pouvoir le reconvertir dans la structure de données ci-dessus. La façon dont il fait cela est avec les data-reactidattributs uniques . Cela s'appelle gonfler l'arborescence des composants.

Vous remarquerez peut-être également que si React effectue un rendu côté client, il utilise l' data-reactidattribut, même s'il n'a pas besoin de perdre ses références. Dans certains navigateurs, il insère votre application dans le DOM en utilisant .innerHTMLpuis gonfle immédiatement l'arborescence des composants, pour améliorer les performances.

L'autre différence intéressante est que les ID React rendus côté client auront un format d'entier incrémental (comme .0.1.4.3), tandis que ceux rendus par le serveur seront préfixés avec une chaîne aléatoire (comme .loqi70ccu80.1.4.3). En effet, l'application peut être rendue sur plusieurs serveurs et il est important qu'il n'y ait pas de collisions. Du côté client, il n'y a qu'un seul processus de rendu, ce qui signifie que des compteurs peuvent être utilisés pour garantir des identifiants uniques.

React 15 utilise à la document.createElementplace , donc le balisage rendu par le client n'inclura plus ces attributs.

— Dan Prince
source
3
Cela devrait être la réponse acceptée car c'est la seule qui répond à la question.
— John
— catamphétamine
2
pour React v15 +:> data-reactid est toujours présent pour le contenu rendu par le serveur, mais il est beaucoup plus petit qu'avant et est simplement un compteur auto-incrémenté.
— RationalDev aime GoFundMonica
1
@RationalDev Ah, c'est intéressant. Comment contourner le problème de collision si l'application est rendue sur plusieurs serveurs?
— Dan Prince
1
je cherchais cette dernière section, merci de l'ajouter. Je ne savais pas pourquoi mon balisage client ne l'incluait pas comme avant, mais une autre partie de mon application l'avait (il a été rendu sur le serveur).
— jacoballenwood
11

Attribut de données personnalisé en HTML5

Je voudrais citer le commentaire d'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 plus tard dans le gestionnaire d'événements et l'utilise pour rechercher l'élément de sortie cible. Il stocke effectivement la classe du div où son texte doit être sorti.

reactidest juste un suffixe, vous pouvez avoir un nom ici par exemple: data-Ayman.

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

— Praveen
source
8
notez que vous ne pouvez pas utiliser de lettres majuscules dans le nom de l'attribut, selon le lien que vous avez fourni.
— Lez
1
Ouais, cette restriction est un peu trompeuse. Le nom d'attribut réel, dans le DOM lui-même, ne peut pas contenir de lettres majuscules, mais l'attribut tel qu'il est écrit dans la balise HTML le peut, car tous les noms de balises et d'attributs sont automatiquement en minuscules lorsqu'ils sont lus de toute façon. Donc, en HTML, vous pouvez utiliser des lettres majuscules, mais dans JS, tout se terminera en minuscules. w3.org/TR/2010/WD-html5-20101019/…
— Peeja
3

les attributs de données sont couramment utilisés pour diverses interactions. Généralement 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 peut éclaircir les choses:

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

Vous pouvez créer un attribut de données en préfixant data-n'importe quelle chaîne de sécurité d'attribut standard (alphanumérique sans espaces ni caractères spéciaux). Par exemple, data-idou dans ce casdata-reactid

— Kai Qing
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.