apa atribut data-reactid di html?

94

Ketika saya mempelajari HTML dari beberapa halaman, saya melihat bahwa beberapa di antaranya menggunakan atribut "data-reactid" seperti: 

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

Apa atribut itu dan apa fungsinya?

javascript html reactjs Ayman El Temsahi
sumber
30
data-reactidadalah atribut khusus yang digunakan oleh pustaka JavaScript React . Yang dikembangkan untuk digunakan dengan Facebook & Instagram.
amit
7
Harap dicatat bahwa semua jawaban menjelaskan apa itu atribut tanggal- kustom dan tidak menjelaskan apa itu data-reactid. Ini digunakan oleh react untuk dapat mereferensikan objek dom dengan instance kelas elemen react.
adrianj98
2
@ adrianj98, kenapa kamu tidak memposting komentar sebagai jawaban saja?
Octopus
3
Bertanya-tanya, jika Facebook menggunakan React mengapa saya tidak menemukan data-reactid di situs mereka?
PabloRosales

Jawaban:

131

The data-reactidatribut atribut khusus digunakan sehingga Bereaksi unik dapat mengidentifikasi komponen-komponennya dalam DOM.

Ini penting karena aplikasi React dapat dirender di server dan juga klien. Internal React membangun representasi referensi ke node DOM yang membentuk aplikasi Anda (versi yang disederhanakan ada di bawah).

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

Tidak ada cara untuk membagikan referensi objek aktual antara server dan klien, dan mengirim versi serial dari keseluruhan struktur pohon berpotensi mahal. Ketika aplikasi di-render di server dan React dimuat di klien, satu-satunya data yang dimilikinya adalah data-reactidatributnya.

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

Itu harus dapat mengubahnya kembali menjadi struktur data di atas. Cara melakukannya adalah dengan data-reactidatribut unik . Ini disebut menggembungkan pohon komponen.

Anda mungkin juga memperhatikan bahwa jika React merender di sisi klien, React menggunakan data-reactidatribut, meskipun tidak perlu kehilangan referensinya. Di beberapa browser, ini memasukkan aplikasi Anda ke DOM menggunakan .innerHTMLkemudian itu memekarkan pohon komponen secara langsung, sebagai pendorong kinerja.

Perbedaan menarik lainnya adalah bahwa ID React yang dirender sisi klien akan memiliki format integer tambahan (seperti .0.1.4.3), sedangkan yang dirender server akan diawali dengan string acak (seperti .loqi70ccu80.1.4.3). Ini karena aplikasi mungkin dirender di beberapa server dan penting bahwa tidak ada benturan. Di sisi klien, hanya ada satu proses rendering, yang berarti penghitung dapat digunakan untuk memastikan id unik.

React 15 menggunakan document.createElementsebagai gantinya , jadi markup yang diberikan klien tidak akan menyertakan atribut ini lagi.

Dan Prince
sumber
3
Ini harus menjadi jawaban yang diterima karena itu satu-satunya yang menjawab pertanyaan.
Yohanes
gcanti.github.io/2014/11/24/…
catamphetamine
2
untuk React v15 +:> data-reactid masih ada untuk konten yang dirender server, namun ini jauh lebih kecil dari sebelumnya dan hanya merupakan penghitung peningkatan otomatis.
RationalDev menyukai GoFundMonica
1
@RationalDev Ah, itu menarik. Bagaimana cara mengatasi masalah tabrakan jika aplikasi dirender di beberapa server?
Dan Pangeran
1
saya sedang mencari bagian terakhir itu, terima kasih telah menambahkannya. Saya bingung mengapa markup klien saya tidak menyertakannya seperti sebelumnya, tetapi bagian lain dari aplikasi saya memilikinya (dirender di server).
jacoballenwood
35

Ini adalah atribut html khusus tetapi mungkin dalam kasus ini digunakan oleh Perpustakaan React JS Facebook.

Lihat: http://facebook.github.io/react/

Samuel GP
sumber
11

Atribut Data Khusus di HTML5

Ingin mengutip komentar Ian dalam jawaban saya:

Itu hanya atribut (yang valid) pada elemen yang dapat Anda gunakan untuk menyimpan data / info tentangnya.

Kode ini kemudian mengambilnya nanti di event handler, dan menggunakannya untuk menemukan elemen keluaran target. Ini secara efektif menyimpan kelas div tempat teksnya harus dikeluarkan.

reactidhanya akhiran, Anda dapat memiliki nama apa pun di sini misalnya: data-Ayman.

Jika Anda ingin menemukan perbedaannya, periksa biola di jawaban dan komentar SO ini .

Praveen
sumber
8
perhatikan bahwa Anda tidak dapat menggunakan huruf besar di nama atribut, sesuai dengan tautan yang Anda berikan.
Lez
1
Ya, pembatasan itu agak menyesatkan. Nama atribut sebenarnya, di DOM itu sendiri, tidak boleh menggunakan huruf besar, tetapi atribut seperti yang tertulis di tag HTML boleh, karena semua nama tag dan atribut secara otomatis menggunakan huruf kecil saat dibaca. Jadi di HTML Anda bisa menggunakan huruf besar, tapi di JS semuanya akan berakhir dengan huruf kecil. w3.org/TR/2010/WD-html5-20101019/...
Peeja
3

atribut data biasanya digunakan untuk berbagai interaksi. Biasanya melalui javascript. Mereka tidak memengaruhi apa pun terkait perilaku situs dan berfungsi sebagai metode yang nyaman untuk meneruskan data untuk tujuan apa pun yang diperlukan. Berikut adalah artikel yang mungkin menjelaskan semuanya:

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

Anda dapat membuat atribut data dengan mengawali data-ke string aman atribut standar apa pun (alfanumerik tanpa spasi atau karakter khusus). Misalnya, data-idatau dalam kasus inidata-reactid

Kai Qing
sumber