Was ist das Datenreaktionsattribut in HTML?

Während ich den HTML-Code einiger Seiten durchgesehen habe, habe ich festgestellt, dass einige von ihnen dieses Attribut "data-reactid" verwenden, wie:

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

Was ist dieses Attribut und welche Funktion hat es?

Das data-reactidAttribut ist ein benutzerdefiniertes Attribut, das verwendet wird, damit React seine Komponenten im DOM eindeutig identifizieren kann.

Dies ist wichtig, da React-Anwendungen sowohl auf dem Server als auch auf dem Client gerendert werden können . Intern React erstellt eine Darstellung von Verweisen auf die DOM-Knoten, aus denen Ihre Anwendung besteht (vereinfachte Version finden Sie weiter unten).

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

Es gibt keine Möglichkeit, die tatsächlichen Objektreferenzen zwischen dem Server und dem Client zu teilen, und das Senden einer serialisierten Version des gesamten Komponentenbaums ist möglicherweise teuer. Wenn die Anwendung auf dem Server gerendert und React auf dem Client geladen wird, sind nur die data-reactidAttribute vorhanden.

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

Es muss in der Lage sein, dies wieder in die obige Datenstruktur umzuwandeln. Die Art und Weise, wie dies geschieht, ist mit den eindeutigen data-reactidAttributen. Dies wird als Aufblasen des Komponentenbaums bezeichnet.

Möglicherweise stellen Sie auch fest, dass React beim Rendern auf der Clientseite das data-reactidAttribut verwendet, obwohl es seine Referenzen nicht verlieren muss. In einigen Browsern wird Ihre Anwendung in das DOM eingefügt, indem .innerHTMLder Komponentenbaum sofort aufgeblasen wird, um die Leistung zu steigern.

Der andere interessante Unterschied besteht darin, dass clientseitig gerenderte React-IDs ein inkrementelles Integer-Format (wie .0.1.4.3) haben, während vom Server gerenderten eine zufällige Zeichenfolge (wie .loqi70ccu80.1.4.3) vorangestellt wird . Dies liegt daran, dass die Anwendung möglicherweise auf mehreren Servern gerendert wird und es wichtig ist, dass keine Kollisionen auftreten. Auf der Clientseite gibt es nur einen Renderprozess, sodass Zähler verwendet werden können, um eindeutige IDs sicherzustellen.

React 15 verwendet document.createElementstattdessen , sodass das vom Client gerenderte Markup diese Attribute nicht mehr enthält.

Es ist ein benutzerdefiniertes HTML-Attribut, wird aber wahrscheinlich in diesem Fall von der Facebook React JS Library verwendet.

Schauen Sie sich das an: http://facebook.github.io/react/

Benutzerdefiniertes Datenattribut in HTML5

Ich möchte Ians Kommentar in meiner Antwort zitieren:

Es ist nur ein Attribut (ein gültiges) für das Element, mit dem Sie Daten / Informationen darüber speichern können.

Dieser Code ruft ihn später im Ereignishandler ab und verwendet ihn, um das Zielausgabeelement zu finden. Es speichert effektiv die Klasse des Div, in der sein Text ausgegeben werden soll.

reactidist nur ein Suffix, Sie können hier einen beliebigen Namen haben, zB : data-Ayman.

Wenn Sie den Unterschied herausfinden möchten, überprüfen Sie die Geigen in dieser SO Antwort und Kommentar .

Datenattribute werden üblicherweise für eine Vielzahl von Interaktionen verwendet. In der Regel über Javascript. Sie haben keinen Einfluss auf das Verhalten der Website und sind eine bequeme Methode, um Daten für jeden gewünschten Zweck weiterzugeben. Hier ist ein Artikel, der Dinge klären kann:

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

Sie können ein Datenattribut erstellen, indem Sie data-einer sicheren Zeichenfolge für Standardattribute (alphanumerisch ohne Leerzeichen oder Sonderzeichen) ein Präfix voranstellen . Zum Beispiel data-idoder in diesem Falldata-reactid

Das ist das HTML-Datenattribut. Weitere Informationen finden Sie hier: http://html5doctor.com/html5-custom-data-attributes/

Im Grunde ist es nur ein Container Ihrer benutzerdefinierten Daten, während der HTML-Code noch gültig ist. Es ist data-plus eine eindeutige Kennung.