quel est l'attribut data-reactid en html?

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?

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.

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

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

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 .

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

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

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