¿Qué es el atributo data-reactid en html?

93

Mientras revisaba el HTML de algunas páginas, noté que algunas de ellas usan este atributo "data-reactid" como: 

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

¿Cuál es ese atributo y cuál es su función?

javascript  html  reactjs 
— Ayman El Temsahi
fuente
30
data-reactides un atributo personalizado utilizado por la biblioteca React JavaScript . Que está desarrollado para usar con Facebook e Instagram.
— amit
7
Tenga en cuenta que todas las respuestas explican qué son los atributos de fecha personalizados y no qué es data-reactid. Reaccionar lo usa para poder hacer referencia al objeto dom con la instancia de clase de elemento de reacción.
— adrianj98
2
@ adrianj98, ¿por qué no publicaste tu comentario como respuesta?
— Octopus
3
Me pregunto, si Facebook usa React, ¿por qué no encuentro ningún data-reactid en su sitio?
— PabloRosales

Respuestas:

131

El data-reactidatributo es un atributo personalizado que se utiliza para que React pueda identificar de forma única sus componentes dentro del DOM.

Esto es importante porque las aplicaciones React se pueden renderizar tanto en el servidor como en el cliente. Internally React crea una representación de referencias a los nodos DOM que componen su aplicación (la versión simplificada se encuentra a continuación).

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

No hay forma de compartir las referencias de objetos reales entre el servidor y el cliente y enviar una versión serializada de todo el árbol de componentes es potencialmente costoso. Cuando la aplicación se procesa en el servidor y React se carga en el cliente, los únicos datos que tiene son los data-reactidatributos.

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

Necesita poder convertir eso nuevamente en la estructura de datos anterior. La forma en que lo hace es con los data-reactidatributos únicos . A esto se le llama inflar el árbol de componentes.

También puede notar que si React se renderiza en el lado del cliente, usa el data-reactidatributo, aunque no necesita perder sus referencias. En algunos navegadores, inserta su aplicación en el DOM y .innerHTMLluego infla el árbol de componentes de inmediato, como un aumento de rendimiento.

La otra diferencia interesante es que los ID de React renderizados del lado del cliente tendrán un formato de entero incremental (como .0.1.4.3), mientras que los renderizados por el servidor tendrán como prefijo una cadena aleatoria (como .loqi70ccu80.1.4.3). Esto se debe a que la aplicación puede procesarse en varios servidores y es importante que no haya colisiones. En el lado del cliente, solo hay un proceso de representación, lo que significa que se pueden usar contadores para garantizar identificadores únicos.

En sudocument.createElement lugar , React 15 usa , por lo que el marcado representado por el cliente ya no incluirá estos atributos.

— Dan Prince
fuente
3
Esta debería ser la respuesta aceptada, ya que es la única que responde a la pregunta.
— John
— catamphetamine
2
para React v15 +:> data-reactid todavía está presente para el contenido renderizado por el servidor, sin embargo, es mucho más pequeño que antes y es simplemente un contador de incremento automático.
— RationalDev le gusta GoFundMonica el
1
@RationalDev Ah, eso es interesante. ¿Cómo se soluciona el problema de la colisión si la aplicación se procesa en varios servidores?
— Dan Prince
1
Estaba buscando la última sección, gracias por agregarla. Estaba confundido por qué el marcado de mi cliente no lo incluía como lo hacía antes, pero otra parte de mi aplicación lo tenía (se procesó en el servidor).
— jacoballenwood
11

Atributo de datos personalizados en HTML5

Me gustaría citar el comentario de Ian en mi respuesta:

Es solo un atributo (uno válido) en el elemento que puede usar para almacenar datos / información sobre él.

Este código lo recupera más tarde en el controlador de eventos y lo usa para encontrar el elemento de salida de destino. Almacena efectivamente la clase del div donde se debe generar su texto.

reactides simplemente un sufijo, puede tener cualquier nombre aquí por ejemplo: data-Ayman.

Si desea encontrar la diferencia, verifique los violines en esta respuesta SO y comente .

— Praveen
fuente
8
tenga en cuenta que no puede usar letras mayúsculas en el nombre del atributo, de acuerdo con el enlace que proporcionó.
— Lez
1
Sí, esa restricción es un poco engañosa. El nombre real del atributo, en el propio DOM, no puede tener letras mayúsculas, pero el atributo tal como está escrito en la etiqueta HTML sí, porque todos los nombres de etiquetas y atributos se minúscula automáticamente a medida que se leen de todos modos. Entonces, en HTML puede usar letras mayúsculas, pero en JS todo terminará en minúsculas. w3.org/TR/2010/WD-html5-20101019/…
— Peeja
3

Los atributos de datos se utilizan comúnmente para una variedad de interacciones. Normalmente a través de javascript. No afectan nada con respecto al comportamiento del sitio y son un método conveniente para pasar datos para cualquier propósito que se necesite. Aquí hay un artículo que puede aclarar las cosas:

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

Puede crear un atributo de datos mediante el prefijo data-de cualquier cadena segura de atributo estándar (alfanumérico sin espacios ni caracteres especiales). Por ejemplo, data-ido en este casodata-reactid

— Kai Qing
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.