qual è l'attributo data-reactid in html?

Mentre esaminavo l'HTML di alcune pagine, ho notato che alcune di esse utilizzano questo attributo "data-reactid" come:

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

Qual è questo attributo e qual è la sua funzione?

L' data-reactidattributo è un attributo personalizzato utilizzato in modo che React possa identificare in modo univoco i suoi componenti all'interno del DOM.

Questo è importante perché le applicazioni React possono essere renderizzate sia sul server che sul client. Internamente React crea una rappresentazione di riferimenti ai nodi DOM che compongono la tua applicazione (la versione semplificata è sotto).

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

Non è possibile condividere i riferimenti agli oggetti effettivi tra il server e il client e l'invio di una versione serializzata dell'intero albero dei componenti è potenzialmente costoso. Quando l'applicazione viene visualizzata sul server e React viene caricato sul client, gli unici dati di cui dispone sono gli data-reactidattributi.

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

Deve essere in grado di riconvertirlo nella struttura dati sopra. Il modo in cui lo fa è con gli data-reactidattributi unici . Questo si chiama gonfiare l'albero dei componenti.

Potresti anche notare che se React esegue il rendering sul lato client, utilizza l' data-reactidattributo, anche se non ha bisogno di perdere i suoi riferimenti. In alcuni browser, inserisce la tua applicazione nel DOM utilizzando .innerHTMLquindi gonfia immediatamente l'albero dei componenti, come aumento delle prestazioni.

L'altra differenza interessante è che gli ID React renderizzati lato client avranno un formato intero incrementale (come .0.1.4.3), mentre quelli renderizzati dal server saranno preceduti da una stringa casuale (come .loqi70ccu80.1.4.3). Questo perché l'applicazione potrebbe essere renderizzata su più server ed è importante che non ci siano collisioni. Sul lato client, esiste un solo processo di rendering, il che significa che i contatori possono essere utilizzati per garantire ID univoci.

React 15 usa document.createElementinvece , quindi il markup renderizzato dal client non includerà più questi attributi.

È un attributo html personalizzato ma probabilmente in questo caso viene utilizzato dalla libreria JS di Facebook React.

Dai un'occhiata: http://facebook.github.io/react/

Attributo dei dati personalizzati in HTML5

Vorrei citare il commento di Ian nella mia risposta:

È solo un attributo (valido) dell'elemento che puoi utilizzare per memorizzare dati / informazioni su di esso.

Questo codice lo recupera quindi in un secondo momento nel gestore eventi e lo utilizza per trovare l'elemento di output di destinazione. Memorizza efficacemente la classe del div in cui deve essere emesso il testo.

reactidè solo un suffisso, si può avere qualsiasi nome qui ad esempio: data-Ayman.

Se vuoi trovare la differenza controlla i violini in questa risposta e commenta SO .

gli attributi dei dati sono comunemente usati per una varietà di interazioni. Tipicamente tramite javascript. Non influenzano nulla sul comportamento del sito e rappresentano un metodo conveniente per trasmettere dati per qualsiasi scopo necessario. Ecco un articolo che potrebbe chiarire le cose:

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

È possibile creare un attributo di dati aggiungendo data-un prefisso a qualsiasi stringa sicura di attributi standard (alfanumerico senza spazi o caratteri speciali). Ad esempio, data-ido in questo casodata-reactid

Questo è l'attributo dei dati HTML. Vedi questo per maggiori dettagli: http://html5doctor.com/html5-custom-data-attributes/

Fondamentalmente è solo un contenitore dei tuoi dati personalizzati mentre continua a rendere valido l'HTML. È data-più un identificatore univoco.