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

Question

En parcourant 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 ?

Answer 1

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

C'est important car les applications React peuvent être rendu sur le serveur ainsi que le client. En interne, React construit une représentation des références aux nœuds du 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 réelles des objets entre le serveur et le client et l'envoi d'une version sérialisée de l'ensemble de l'arbre 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 références d'objets data-reactid attributs.

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

Il doit être capable de reconvertir ces données dans la structure de données ci-dessus. La façon dont il le fait est avec l'unique data-reactid attributs. C'est ce qu'on appelle gonflage l'arbre des composants.

Vous pouvez également remarquer que si React effectue un rendu côté client, il utilise la balise data-reactid 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 à l'aide de la fonction .innerHTML alors il gonfle l'arbre des composants directement, pour améliorer les performances.

L'autre différence intéressante est que les identifiants React rendus côté client auront un format entier incrémental (comme .0.1.4.3 ), tandis que ceux rendus par le serveur seront préfixés par une chaîne aléatoire (telle que .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 document.createElement au lieu de Ainsi, le balisage rendu par le client n'inclura plus ces attributs.

Answer 2

Il s'agit d'un attribut html personnalisé mais, dans ce cas, il est probablement utilisé par la bibliothèque React JS de Facebook.

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

Answer 3

Attribut de données personnalisées en HTML5

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

Il s'agit simplement d'un attribut (valide) sur l'élément que vous pouvez utiliser pour stocker des données ou des informations à son sujet.

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

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 violons dans ce SO réponse et commentaire .

Answer 4

Les attributs de données sont couramment utilisés pour une variété d'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, quel que soit le but recherché. Voici un article qui pourrait clarifier 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 espace ni caractères spéciaux). Par exemple, data-id ou dans ce cas data-reactid

Answer 5

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

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