o que é atributo data-reactid em html?

Enquanto eu examinava o HTML de algumas páginas, percebi que algumas delas usam esse atributo "data-reactid" como:

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

Qual é esse atributo e qual é sua função?

O data-reactidatributo é um atributo personalizado usado para que o React possa identificar exclusivamente seus componentes dentro do DOM.

Isso é importante porque os aplicativos React podem ser renderizados no servidor e também no cliente. Internamente, o React cria uma representação de referências aos nós DOM que constituem seu aplicativo (a versão simplificada está abaixo).

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

Não há como compartilhar as referências reais do objeto entre o servidor e o cliente, e enviar uma versão serializada de toda a árvore de componentes é potencialmente caro. Quando o aplicativo é renderizado no servidor e o React é carregado no cliente, os únicos dados que ele possui são os data-reactidatributos.

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

Ele precisa ser capaz de converter isso de volta na estrutura de dados acima. A maneira como isso acontece é com os data-reactidatributos exclusivos . Isso é chamado de inflar a árvore de componentes.

Você também pode notar que se o React renderizar no lado do cliente, ele usará o data-reactidatributo, mesmo que não precise perder suas referências. Em alguns navegadores, ele insere seu aplicativo no DOM usando e .innerHTMLentão infla a árvore de componentes imediatamente, como um aumento de desempenho.

A outra diferença interessante é que os ids do React renderizados do lado do cliente terão um formato de inteiro incremental (como .0.1.4.3), enquanto os renderizados pelo servidor serão prefixados com uma string aleatória (como .loqi70ccu80.1.4.3). Isso ocorre porque o aplicativo pode ser renderizado em vários servidores e é importante que não haja colisões. No lado do cliente, há apenas um processo de renderização, o que significa que os contadores podem ser usados ​​para garantir ids exclusivos.

Emdocument.createElement vez disso , o React 15 usa , portanto, a marcação renderizada pelo cliente não incluirá mais esses atributos.

É um atributo html personalizado, mas provavelmente, neste caso, é usado pela Biblioteca JS do Facebook React.

Dê uma olhada: http://facebook.github.io/react/

Atributo de dados personalizados em HTML5

Gostaria de citar o comentário de Ian em minha resposta:

É apenas um atributo (válido) no elemento que você pode usar para armazenar dados / informações sobre ele.

Esse código então o recupera mais tarde no manipulador de eventos e o usa para encontrar o elemento de saída de destino. Ele efetivamente armazena a classe do div onde seu texto deve ser gerado.

reactidé apenas um sufixo, você pode ter qualquer nome aqui, por exemplo: data-Ayman.

Se você quiser encontrar a diferença, verifique os erros nesta resposta do SO e comente .

atributos de dados são comumente usados ​​para uma variedade de interações. Normalmente via javascript. Eles não afetam nada em relação ao comportamento do site e são um método conveniente para transmitir dados para qualquer finalidade necessária. Aqui está um artigo que pode esclarecer as coisas:

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

Você pode criar um atributo de dados prefixando data-qualquer string segura de atributo padrão (alfanumérico sem espaços ou caracteres especiais). Por exemplo, data-idou neste casodata-reactid

Esse é o atributo de dados HTML. Veja isso para obter mais detalhes: http://html5doctor.com/html5-custom-data-attributes/

Basicamente, é apenas um contêiner de seus dados personalizados e, ao mesmo tempo, torna o HTML válido. É data-mais algum identificador único.