html'de data-reactid özniteliği nedir?

Bazı sayfaların HTML'sini incelerken, bazılarının bu "data-reactid" özelliğini aşağıdaki gibi kullandığını fark ettim:

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

Bu nitelik nedir ve işlevi nedir?

data-reactidNitelik yüzden kullanılan özel bir niteliktir Tepki benzersiz DOM içindeki bileşenleri tespit edebilir.

Bu önemlidir, çünkü React uygulamaları hem sunucuda hem de istemcide oluşturulabilir. Dahili olarak React, uygulamanızı oluşturan DOM düğümlerine referansların bir temsilini oluşturur (basitleştirilmiş sürüm aşağıdadır).

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

Gerçek nesne referanslarını sunucu ve istemci arasında paylaşmanın bir yolu yoktur ve tüm bileşen ağacının serileştirilmiş bir sürümünü göndermek potansiyel olarak pahalıdır. Uygulama sunucuda işlendiğinde ve React istemcide yüklendiğinde, sahip olduğu tek veri data-reactidözniteliklerdir.

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

Bunu yukarıdaki veri yapısına geri dönüştürebilmesi gerekiyor. Bunu yapmanın yolu, benzersiz data-reactidniteliklerle. Buna bileşen ağacının şişirilmesi denir .

Ayrıca React istemci tarafında data-reactidişliyorsa, referanslarını kaybetmesi gerekmese bile özniteliği kullandığını fark edebilirsiniz. Bazı tarayıcılarda, uygulamanızı DOM'a ekler ve .innerHTMLardından performans artışı olarak bileşen ağacını hemen şişirir.

Diğer ilginç fark, istemci tarafında oluşturulan React kimliklerinin artımlı bir tam sayı formatına (benzer .0.1.4.3) sahip olması, sunucu tarafından oluşturulanların önüne rastgele bir dizge (örneğin .loqi70ccu80.1.4.3) eklenmesidir . Bunun nedeni, uygulamanın birden çok sunucuda işlenebilmesidir ve çarpışma olmaması önemlidir. İstemci tarafında, yalnızca bir işleme süreci vardır, bu da sayaçların benzersiz kimlikler sağlamak için kullanılabileceği anlamına gelir.

document.createElementBunun yerine React 15 kullanır , bu nedenle istemci tarafından oluşturulan işaretleme artık bu özellikleri içermeyecektir.

Bu özel bir html niteliğidir ancak muhtemelen bu durumda Facebook React JS Kitaplığı tarafından kullanılır.

Bir göz atın: http://facebook.github.io/react/

HTML5'te Özel Veri özelliği

Cevabımda Ian'ın yorumundan alıntı yapmak isterim:

Bu, onunla ilgili verileri / bilgileri depolamak için kullanabileceğiniz öğenin yalnızca bir özniteliğidir (geçerli bir öznitelik).

Bu kod daha sonra onu olay işleyicisinde alır ve hedef çıktı öğesini bulmak için kullanır. Metninin çıktısının alınması gereken div sınıfını etkin bir şekilde depolar.

reactidSadece bir soneklerdir sen mesela burada herhangi bir ad olabilir: data-Ayman.

Farkı bulmak istiyorsanız, bu SO cevabındaki ve yorumdaki kemanları kontrol edin .

veri öznitelikleri genellikle çeşitli etkileşimler için kullanılır. Genellikle javascript aracılığıyla. Site davranışıyla ilgili hiçbir şeyi etkilemezler ve ihtiyaç duyulan herhangi bir amaç için verileri iletmek için uygun bir yöntem olarak dururlar. İşte işleri açıklığa kavuşturabilecek bir makale:

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

data-Herhangi bir standart öznitelik güvenli dizesinin önüne ekleyerek bir veri özniteliği oluşturabilirsiniz (boşluk veya özel karakter içermeyen alfasayısal). Örneğin data-idveya bu durumdadata-reactid

Bu, HTML veri özniteliğidir. Daha fazla ayrıntı için buna bakın: http://html5doctor.com/html5-custom-data-attributes/

Temelde, HTML'yi geçerli hale getirirken yalnızca özel verilerinizin bulunduğu bir kapsayıcıdır. Bu var data-artı bazı benzersiz tanımlayıcı.