o que é atributo data-reactid em html?

92

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?

javascript html reactjs

— Ayman El Temsahi
fonte

30

data-reactidé um atributo personalizado usado pela biblioteca React JavaScript . Que é desenvolvido para usar com Facebook e Instagram.

— Amit

7

Observe que todas as respostas explicam o que são atributos de data personalizados e não o que é data-reactid. Ele é usado pelo react para poder fazer referência ao objeto dom com a instância da classe do elemento react.

— adrianj98

2

@ adrianj98, por que você não postou seu comentário como uma resposta?

— Octopus

3

Se o Facebook usa React, por que não encontro nenhum data-reactid em seu site?

— PabloRosales de

130

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.

— Dan Prince
fonte

3

Essa deve ser a resposta aceita, pois é a única que responde à pergunta.

— João

gcanti.github.io/2014/11/24/…

— catanfetamina

2

para React v15 +:> data-reactid ainda está presente para conteúdo renderizado pelo servidor, no entanto, é muito menor do que antes e é simplesmente um contador de incremento automático.

— RationalDev gosta de GoFundMonica

1

@RationalDev Ah, isso é interessante. Como contornar o problema de colisão se o aplicativo for renderizado em vários servidores?

— Dan Prince

1

Eu estava procurando a última seção, obrigado por adicioná-la. Eu estava confuso por que minha marcação de cliente não o incluía como antes, mas outra parte do meu aplicativo tinha (foi renderizado no servidor).

— jacoballenwood

35

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

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

— Samuel GP
fonte

11

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 .

— Praveen
fonte

8

observe que você não pode usar letras maiúsculas no nome do atributo, de acordo com o link que você forneceu.

— Lez

1

Sim, essa restrição é um pouco enganosa. O nome real do atributo, no próprio DOM, não pode ter letras maiúsculas, mas o atributo conforme escrito na tag HTML pode, porque todos os nomes de tag e atributo são automaticamente escritos em minúsculas quando são lidos de qualquer maneira. Portanto, em HTML você pode usar letras maiúsculas, mas em JS, tudo terminará em minúsculas. w3.org/TR/2010/WD-html5-20101019/…

— Peeja

3

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

— Kai Qing
fonte

3

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.

— Ben Gulapa
fonte