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

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?

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.

Es un atributo html personalizado, pero probablemente en este caso sea utilizado por Facebook React JS Library.

Eche un vistazo: http://facebook.github.io/react/

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 .

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

Ese es el atributo de datos HTML. Vea esto para más detalles: http://html5doctor.com/html5-custom-data-attributes/

Básicamente, es solo un contenedor de sus datos personalizados al mismo tiempo que hace que el HTML sea válido. Es data-más un identificador único.