Mientras yo estaba pasando por el código HTML de algunas páginas, me di cuenta de que algunos de ellos utilizan este atributo «data-reactid» como :

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

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

  • data-reactid es atributo personalizado utilizados por Reaccionar biblioteca de JavaScript. Que se ha desarrollado para su uso con Facebook & Instagram.
  • Por favor, tenga en cuenta que todas las respuestas están explicando qué costumbre fecha – atributos y no explicar lo data-reactid es. Es utilizado por reaccionar a ser capaz de hacer referencia al objeto dom con el reaccionar elemento instancia de la clase.
  • ¿por qué no publicas el comentario como una respuesta en su lugar?
  • Pregunto, si Facebook utiliza Reaccionar por qué no encuentro data-reactid en su sitio?

5 Comentarios

  1. 127

    La data-reactid atributo es un atributo personalizado se utiliza para que Reaccionar puede identificar sus componentes dentro de la DOM.

    Esto es importante porque Reaccionan las aplicaciones pueden ser prestados en el servidor así como el cliente. Internamente Reaccionar construye una representación de las referencias a los nodos DOM que la aplicación (versión simplificada abajo).

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

    No hay manera de compartir el objeto real de referencias entre el servidor y el cliente y el envío de una versión serializada de todo el árbol de componentes es potencialmente costoso. Cuando la solicitud se procesa en el servidor y Reaccionar se carga en el cliente, los únicos datos que tiene son los data-reactid atributos.

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

    Que necesita para ser capaz de convertir eso en la estructura de datos anterior. La forma en que lo hace es con el único data-reactid atributos. Esto se llama inflar el árbol de componentes.

    Puede observar que si se hace Reaccionar en el lado del cliente, se utiliza el data-reactid atributo, aunque no es necesario perder sus referencias. En algunos navegadores se inserta su aplicación en el DOM utilizando .innerHTML, a continuación, se infla el árbol de componentes de inmediato, como un aumento de rendimiento.

    Otra interesante diferencia es que el lado del cliente prestados Reaccionar ids tendrá un incremento en el formato de número entero (como .0.1.4.3), mientras que el servidor prestados serán señaladas con una cadena aleatoria (como .loqi70ccu80.1.4.3). Esto es debido a que la aplicación podría ser prestados a través de múltiples servidores y es importante que no hay colisiones. En el lado del cliente no es sólo un proceso de representación, lo que significa que los contadores pueden ser utilizados para asegurar identificadores únicos.

    Reaccionan 15 utiliza documento.createElement en lugar de, de modo que el cliente marcado representado no incluir estos atributos más.

    • Esto debe ser aceptado como respuesta es la única que responde a la pregunta.
    • gcanti.github.io/2014/11/24/…
    • Enorme +1 a la actualización en Reaccionar 15.
    • para Reaccionar v15+: > data-reactid aún está presente para servidor-contenido presentado, sin embargo es mucho más pequeño que el anterior y es simplemente una función de contador incremental.
    • Ah, que interesante. ¿Cómo se contrae alrededor de la colisión el problema de si la aplicación está traducida en varios servidores?
    • No estoy seguro. Yo estaba tratando de averiguar por qué me estaba poniendo, por ejemplo: data-reactid=»1″ con Reaccionar 15.1.0, pero era porque yo era pre-renderizado de una página «estática». Pertinentes cometer parece ser aquí: github.com/facebook/react/pull/5205/commits/…
    • yo estaba buscando para que la última sección, gracias por agregar que. Yo estaba confundido ¿por qué mi cliente de marcado de no incluirlo como hacía antes, pero otra parte de mi aplicación ha de tener (que se representa en el servidor).

  2. 11

    Datos Personalizados atributo en HTML5

    Gustaría citar Ian comentario en mi respuesta:

    Es sólo un atributo (una válida) en el elemento que puede utilizar
    para almacenar los datos/información.

    Este código, a continuación, recupera más tarde en el controlador de eventos, y la utiliza para
    encontrar el destino elemento de salida. Efectivamente tiendas de la clase de la
    div donde su texto debe ser emitida.

    reactid es sólo un sufijo, que puede tener cualquier nombre, por ejemplo: data-Ayman.

    Si quieres encontrar la diferencia de verificación de los violines en este ASÍ que responder y comentar.

    • tenga en cuenta que usted no puede usar letras mayúsculas en el nombre de atributo, según el enlace que nos has proporcionado.
    • Sí, esa restricción es un poco engañoso. El real nombre de atributo, en el DOM sí mismo, no puede tener letras en mayúsculas, pero el atributo como está escrito en la etiqueta HTML puede, porque todos los nombres de atributos y etiquetas son automáticamente convertidas a minúsculas como son leer de todos modos. Así que en HTML se pueden utilizar letras mayúsculas, pero en JS que todos terminan en minúsculas. w3.org/TR/2010/WD-html5-20101019/…
  3. 3

    atributos de datos que habitualmente se utilizan para una variedad de interacciones. Por lo general a través de javascript. No afectan en nada relacionado con el comportamiento del sitio web y de pie como un método conveniente para pasar los datos para cualquier fin que sea necesario. Aquí está un artículo que puede aclarar las cosas:

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

    Puede crear un atributo de datos con el prefijo de data- a cualquier atributo estándar de cadena segura (alfanuméricos, sin espacios ni caracteres especiales). Por ejemplo, data-id o en este caso data-reactid

Dejar respuesta

Please enter your comment!
Please enter your name here