Mentre stavo passando il codice HTML di alcune pagine, ho notato che alcuni di loro usano questo attributo "data-reactid" come:qual è l'attributo data-reactid in html?
<a data-reactid="......" ></a>
Qual è quell'attributo e qual è la sua funzione?
L'attributo data-reactid è un attributo personalizzato utilizzato in modo che React può identificare in modo univoco i suoi componenti all'interno del DOM.
Questo è importante perché le applicazioni React possono essere rendered at the server e il client. Internally React crea una rappresentazione di riferimenti ai nodi DOM che costituiscono 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 c'è modo di condividere i riferimenti agli oggetti reali tra il server e il client e l'invio di una versione serializzata dell'intero albero componente è potenzialmente costoso.Quando l'applicazione viene sottoposta a rendering sul server e React viene caricato sul client, gli unici dati che possiede sono gli attributi data-reactid.
<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 di cui sopra. Il modo in cui lo fa è con gli attributi unici data-reactid. Questo è chiamato gonfiando l'albero dei componenti.
Si potrebbe inoltre notare che se React esegue il rendering sul lato client, utilizza l'attributo data-reactid, anche se non ha bisogno di perdere i riferimenti. In alcuni browser inserisce la tua applicazione nel DOM utilizzando .innerHTML, quindi gonfia immediatamente l'albero dei componenti, come un aumento delle prestazioni.
L'altra differenza interessante è che lato client resi React ids avranno un formato intero incrementale (come .0.1.4.3), mentre quelli del server saranno resi prefissati con una stringa casuale (come .loqi70ccu80.1.4.3). Questo perché l'applicazione potrebbe essere sottoposta a rendering su più server ed è importante che non vi 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 uses document.createElement instead, quindi il markup reso client non includerà più questi attributi.
Questa dovrebbe essere la risposta accettata in quanto è l'unico che risponde alla domanda. – John
https://gcanti.github.io/2014/11/24/understanding-react-and-reimplementing-it-from-scratch-part-2.html – asdfasdfads
Enorme +1 all'aggiornamento di React 15. –
gli attributi di dati sono comunemente usati per una varietà di interazioni. In genere tramite javascript. Non influenzano nulla per quanto riguarda il comportamento del sito e si ergono come un metodo conveniente per passare i dati per qualsiasi scopo necessario. Ecco un articolo che può chiarire le cose:
http://ejohn.org/blog/html-5-data-attributes/
È possibile creare un attributo data premettendo data- a qualsiasi stringa di sicuro attributo standard (alfanumerico senza spazi o caratteri speciali). Ad esempio, data-id o in questo caso data-reactid
Custom Data attribute in HTML5
piace citare il commento di Ian nella mia risposta:
E 'solo un attributo (uno valido) sull'elemento che è possibile utilizzare per memorizzare dati/informazioni su di esso.
Questo codice quindi lo recupera in seguito 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 si desidera trovare la differenza, controllare i violini in questo SO answer and comment.
nota che non è possibile utilizzare le lettere maiuscole nel nome dell'attributo, in base al collegamento fornito. – Lez
Sì, quella restrizione è un po 'fuorviante. Il nome dell'attributo attuale, nel DOM stesso, non può avere lettere maiuscole, ma l'attributo come scritto nel tag HTML può, perché tutti i nomi di tag e attributi vengono automaticamente scritti in minuscolo man mano che vengono letti. Quindi in HTML puoi usare le lettere maiuscole, ma in JS finirà tutto in minuscolo. https://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes – Peeja
Questo è l'attributo dei dati HTML. Vedi questo per ulteriori dettagli: http://html5doctor.com/html5-custom-data-attributes/
Fondamentalmente è solo un contenitore di dati personalizzati mentre si continua a rendere l'HTML valido. È data- più un identificatore univoco.
È un attributo html personalizzato ma probabilmente in questo caso viene utilizzato dalla libreria Jeac di Facebook React.
Date un'occhiata: http://facebook.github.io/react/
'data-reactid' è un attributo personalizzato utilizzato da [React JavaScript library] (http://facebook.github.io/react/). Che è stato sviluppato per l'uso con Facebook e Instagram. – amit
Si prega di notare che tutte le risposte stanno spiegando quali sono gli attributi di data personalizzati e non si spiega quale sia il reattivo di dati. Viene utilizzato da react per poter fare riferimento all'oggetto dom con l'istanza della classe dell'elemento react. – adrianj98
@ adrianj98, perché non hai pubblicato il tuo commento come risposta? – Octopus