¿Cuál es el uso del atributo data-reactid en HTML?

El atributo es un atributo personalizado que reacciona puede identificar fácilmente sus componentes dentro del DOM. Al igual que los atributos de «clases» e «id» de HTML, «data-reactid» ayuda a identificar de forma única el elemento.

Dado que compartir todas las referencias de objetos en un orden serializado entre el servidor y el cliente es potencialmente costoso. Por lo tanto, el uso de estos ID reacciona internamente crea una representación de las referencias de los Nodes (utilizados para construir su aplicación) presentes en el DOM. Cuando se procesa la aplicación y se carga la reacción en el cliente, los únicos datos que comparte con el servidor son los atributos «data-reactid».

Luego, los atributos «data-reactid» se vuelven a convertir en la estructura de datos proporcionada y muestran los datos sin representar realmente la estructura de datos completa en el cliente.

Ejemplo: importar los datos del archivo Data.js usando el atributo «react-id» en app.js ).

Datos.js

export const Data=[
{
 id: '.1',
 node: Div,
 children: [
   {
     id: '.2',
     node: Span,
     children: [
       {
         id: '.2’,
         node: Input,
         children: []
       }
    ]}
     ]
}];

Aplicación.js

import React, { Component } from 'react';
import {Data} from './src/data';
class App extends Component{
    render(){
        return(
            <div data-reactid='.1'>
                <span data-reactid='.2'>
                  <input data-reactid='.3' />
                </span>
            </div>
               );
        }
}