ce qui est data-reactid attribut html?

Alors que j'allais à travers le code HTML de quelques pages, j'ai remarqué que certains d'entre eux utilisent cette attribut "data-reactid" comme :

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

Qu'est-ce que cet attribut et quelle est sa fonction ?

data-reactid est l'attribut personnalisé utilisé par Réagir bibliothèque JavaScript. Qui est développé pour une utilisation avec Facebook & Instagram.
Veuillez noter que toutes les réponses sont en expliquant ce que la coutume date - les attributs sont et ne pas expliquer ce que data-reactid est. Il est utilisé par de réagir à être en mesure de faire référence à l'objet dom avec la réagir élément instance de classe.
pourquoi n'avez-vous pas poster votre commentaire est une réponse à la place?
Me demande, si Facebook utilise Réagir pourquoi je ne trouve pas du tout data-reactid dans leur site?

InformationsquelleAutor Ayman El Temsahi | 2013-07-11

127

La data-reactid attribut est un attribut personnalisé utilisé de sorte que Réagir peut identifier ses composants dans le DOM.

Ceci est important parce que Réagissent les applications peuvent être rendu sur le serveur ainsi que le client. En interne Réagir, construit une représentation de références pour les nœuds qui composent votre application (version simplifiée 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 l'objet de renvois entre le serveur et le client et l'envoi d'une version sérialisée de l'ensemble de la composante de l'arbre est potentiellement coûteux. Lorsque l'application est rendue sur le serveur et de Réagir est chargé au client, les seules données il s'agit de la data-reactid attributs.
```
<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>
```
Il doit être en mesure de les convertir en arrière dans la structure de données ci-dessus. La façon dont il le fait est, avec l'unique data-reactid attributs. Ceci est appelé gonfler le composant de l'arbre.

On peut également constater que si Réagissent rend du côté client, il utilise le data-reactid attribut, même si elle n'a pas besoin de perdre ses références. Dans certains navigateurs, il insère de votre application dans les DOM à l'aide de .innerHTML puis il gonfle le composant de l'arbre tout de suite, comme un gain de performance.

L'autre différence intéressante est que côté client rendus Réagir ids ont un différentiel format de nombre entier (comme .0.1.4.3), alors que le serveur rendus seront préfixés par une chaîne de caractères aléatoires (comme .loqi70ccu80.1.4.3). C'est parce que l'application peut être rendu à travers de multiples serveurs et il est important qu'il n'y a pas de collisions. Du côté client, il est seulement un processus de rendu, ce qui signifie compteurs peuvent être utilisés pour assurer des identifiants uniques.

Réagir 15 utilise document.createElement au lieu, si bien que le client rendus de balisage de ne pas inclure ces attributs plus.
- Ce doit être la accepté de répondre que c'est le seul qui répond à la question.
- gcanti.github.io/2014/11/24/...
- Énorme +1 pour la mise à jour sur les Réagissent 15.
- pour Réagir v15+: > data-reactid est toujours présent pour le serveur-rendu du contenu, mais il est beaucoup plus petit qu'avant et est tout simplement une auto-incrémentation du compteur.
- Ah, c'est intéressant. Comment est-il contourner le problème de collision si l'application est rendue sur plusieurs serveurs?
- Je ne suis pas sûr. J'ai été à essayer de comprendre pourquoi je voulais en venir, par exemple: data-reactid="1" avec Réagissent 15.1.0, mais c'était parce que j'étais pré-rendu d'une page "statique". Commit semble être ici: github.com/facebook/react/pull/5205/commits/...
- j'ai été à la recherche pour cette dernière section, merci pour l'ajout que. J'étais confus pourquoi mon client balisage n'a pas l'inclure comme il l'a fait avant, mais une autre partie de mon application n'a l'avoir (il a été rendu sur le serveur).
InformationsquelleAutor Dan Prince
35

Il est une coutume attribut html, mais probablement dans ce cas est utilisé par le Facebook de Réagir Bibliothèque JS.

Prendre un coup d'oeil: http://facebook.github.io/react/

InformationsquelleAutor Samuel G. P.
11

personnaliser l'attribut de Données en HTML5

Voudrais citer Ian commentaire dans ma réponse:

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

Ce code récupère ensuite plus tard dans le gestionnaire d'événements, et l'utilise pour
trouver la cible élément de sortie. Efficacement les magasins de la catégorie de l'
div où son texte doit être délivrée.

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

Si vous voulez savoir la différence de vérifier la tripote dans ce DONC réponse et commentaire.
- notez que vous ne pouvez pas utiliser les majuscules dans le nom de l'attribut, selon le lien que vous avez fourni.
- Ouais, cette restriction est un peu trompeur. Le véritable nom de l'attribut, dans les DOM lui-même, ne peut pas avoir que des majuscules, mais l'attribut comme écrit dans la balise HTML peut, parce que toutes les balises et des attributs les noms sont automatiquement mis en minuscule comme ils sont à lire de toute façon. Donc, en HTML, vous pouvez utiliser des lettres majuscules, mais en JS, il va tous se retrouver en minuscules. w3.org/TR/2010/WD-html5-20101019/...
InformationsquelleAutor Praveen
3

attributs de données sont couramment utilisés pour une variété d'interactions. Généralement via javascript. Ils n'influent pas sur quoi que ce soit concernant le site de comportement et de se présenter comme une méthode pratique pour transmettre des données, pour quelque raison que ce soit nécessaire. Voici un article qui peut clarifier les choses:

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

Vous pouvez créer un attribut de données par la préfixation de data- toute norme attribut sûr chaîne de caractères (alphanumériques sans espaces ni de caractères spéciaux). Par exemple, data-id ou dans ce cas data-reactid

InformationsquelleAutor Kai Qing
3

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

C'est juste un conteneur de vos données personnalisées tout en continuant à faire du HTML valide.
C'est data- plus quelques identifiant unique.

InformationsquelleAutor Ben Gulapa

Vous devez vous connecter pour publier un commentaire.