Was ist das Datenreaktionsattribut in HTML?

92

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?

javascript  html  reactjs 
— Ayman El Temsahi
quelle
30
data-reactidist ein benutzerdefiniertes Attribut, das von der React JavaScript-Bibliothek verwendet wird . Welches für die Verwendung mit Facebook & Instagram entwickelt wurde.
— Amit
7
Bitte beachten Sie, dass in allen Antworten die benutzerdefinierten Datumsattribute und nicht die Datenreaktions-ID erläutert werden. Es wird von react verwendet, um auf das dom-Objekt mit der Instanz der react-element-Klasse verweisen zu können.
— Adrianj98
2
@ adrianj98, warum hast du deinen Kommentar nicht stattdessen als Antwort gepostet?
— Octopus
3
Frage mich, ob Facebook React verwendet, warum ich auf seiner Website keine Datenreaktions-ID finde?
— PabloRosales

Antworten:

130

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.

— Dan Prince
quelle
3
Dies sollte die akzeptierte Antwort sein, da dies die einzige ist, die die Frage beantwortet.
— John
— Katamphetamin
2
für React v15 +:> data-reactid ist für vom Server gerenderte Inhalte immer noch vorhanden, ist jedoch viel kleiner als zuvor und lediglich ein automatisch inkrementierender Zähler.
— RationalDev mag GoFundMonica
1
@RationalDev Ah, das ist interessant. Wie kann das Kollisionsproblem umgangen werden, wenn die App auf mehreren Servern gerendert wird?
— Dan Prince
1
Ich habe nach dem letzten Abschnitt gesucht, danke, dass du das hinzugefügt hast. Ich war verwirrt, warum mein Client-Markup es nicht wie zuvor enthielt, aber ein anderer Teil meiner App hatte es (es wurde auf dem Server gerendert).
— Jacoballenwood
11

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 .

— Praveen
quelle
8
Beachten Sie, dass Sie im Attributnamen keine Großbuchstaben verwenden können, je nach dem von Ihnen angegebenen Link.
— Lez
1
Ja, diese Einschränkung ist etwas irreführend. Der tatsächliche Attributname im DOM selbst darf keine Großbuchstaben enthalten, das im HTML-Tag ausgeschriebene Attribut jedoch, da alle Tag- und Attributnamen beim Lesen automatisch in Kleinbuchstaben geschrieben werden. In HTML können Sie also Großbuchstaben verwenden, in JS wird jedoch alles in Kleinbuchstaben geschrieben. w3.org/TR/2010/WD-html5-20101019/…
— Peeja
3

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

— Kai Qing
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.