Show Ashutosh Mishra Belajarlah lagi PELAJARI LEBIH LANJUT TENTANG KEAHLIAN @ASHUTOSHMISHRA DAN TEMPATNYA DI INTERNET CERITA TERKAITMEMUAT Hackernoon hq - po box 2206, edwards, colorado 81632, usa React mengimplementasikan sistem DOM independen-browser untuk kinerja dan kompatibilitas lintas-browser. Kami mengambil kesempatan untuk membersihkan beberapa sisi kasar dalam implementasi DOM browser Di React, semua properti dan atribut DOM (termasuk event handler) harus menggunakan camelCase. Misalnya, atribut HTML 0 atribut, yang harus ditulis dengan huruf kecil. Misalnya, Anda dapat menyimpan _1 sebagai 1Perbedaan AtributAda sejumlah atribut yang bekerja secara berbeda antara React dan HTML diperiksaAtribut 3 didukung oleh 4 komponen bertipe 5 atau 6. Anda dapat menggunakannya untuk mengatur apakah komponen dicentang. Ini berguna untuk membangun komponen yang dikendalikan. 7 adalah padanan tak terkendali, yang menetapkan apakah komponen diperiksa saat pertama kali dipasangnama kelasUntuk menentukan kelas CSS, gunakan atribut 8. Ini berlaku untuk semua elemen DOM dan SVG reguler seperti 9, 0, dan lainnyaJika Anda menggunakan React dengan Komponen Web (yang tidak umum), gunakan atribut 1 sebagai gantinyaberbahayaSetInnerHTML _2 adalah pengganti React untuk menggunakan 3 di DOM browser. Secara umum, menyetel HTML dari kode berisiko karena mudah untuk secara tidak sengaja mengekspos pengguna Anda ke serangan skrip lintas situs (XSS). Jadi, Anda dapat menyetel HTML langsung dari React, tetapi Anda harus mengetikkan 2 dan meneruskan objek dengan kunci 5, untuk mengingatkan diri sendiri bahwa itu berbahaya. Sebagai contoh
htmlUntukKarena _6 adalah kata yang dicadangkan dalam JavaScript, elemen React menggunakan 7 sebagai gantinyadalam perubahanAcara _8 berperilaku seperti yang Anda harapkan. setiap kali bidang formulir diubah, acara ini diaktifkan. Kami sengaja tidak menggunakan perilaku browser yang ada karena 8 adalah nama yang salah untuk perilakunya dan React mengandalkan peristiwa ini untuk menangani input pengguna secara real timeterpilihJika Anda ingin menandai _0 sebagai yang dipilih, referensikan nilai opsi tersebut di 1 dari 2 sebagai gantinya. Lihat untuk petunjuk terperincigaya
Atribut _3 menerima objek JavaScript dengan properti camelCase daripada string CSS. Ini konsisten dengan properti JavaScript DOM _3, lebih efisien, dan mencegah lubang keamanan XSS. Sebagai contoh
Perhatikan bahwa gaya tidak diberi awalan otomatis. Untuk mendukung browser lama, Anda perlu menyediakan properti gaya yang sesuai
Kunci gaya adalah camelCase agar konsisten dengan mengakses properti pada node DOM dari JS (mis. g. _9). Prefiks vendor selain 0 harus dimulai dengan huruf kapital. Inilah sebabnya mengapa _1 memiliki huruf besar “W”React akan secara otomatis menambahkan akhiran "px" ke properti gaya inline numerik tertentu. Jika Anda ingin menggunakan satuan selain “px”, tentukan nilainya sebagai string dengan satuan yang diinginkan. Sebagai contoh
Tidak semua properti gaya diubah menjadi string piksel. Yang tertentu tetap tanpa unit (misalnya 2, 3, 4). Daftar lengkap properti tanpa unit dapat dilihatsuppressContentEditableWarningBiasanya, ada peringatan ketika elemen dengan anak-anak juga ditandai sebagai 5, karena tidak akan berfungsi. Atribut ini menekan peringatan itu. Jangan gunakan ini kecuali Anda sedang membangun perpustakaan seperti Draft. js yang mengelola _5 secara manualsuppressHydrationWarningJika Anda menggunakan rendering React sisi server, biasanya ada peringatan saat server dan klien merender konten yang berbeda. Namun, dalam beberapa kasus yang jarang terjadi, sangat sulit atau tidak mungkin untuk menjamin kecocokan yang tepat. Misalnya, stempel waktu diharapkan berbeda di server dan di klien Jika Anda menyetel 7 ke 8, React tidak akan memperingatkan Anda tentang ketidakcocokan atribut dan konten elemen tersebut. Ini hanya bekerja sedalam satu tingkat, dan dimaksudkan untuk digunakan sebagai pintu keluar darurat. Jangan terlalu sering menggunakannya. Anda dapat membaca lebih lanjut tentang hidrasi dinilaiAtribut _1 didukung oleh komponen 4, 2 dan 3. Anda dapat menggunakannya untuk mengatur nilai komponen. Ini berguna untuk membangun komponen yang dikendalikan. 4 adalah padanan yang tidak terkontrol, yang menetapkan nilai komponen saat pertama kali dipasangSemua Atribut HTML yang DidukungSejak React 16, atribut DOM standar atau kustom apa pun didukung sepenuhnya React selalu menyediakan API yang berpusat pada JavaScript ke DOM. Karena komponen React sering menggunakan prop terkait kustom dan DOM, React menggunakan konvensi 5 seperti halnya API DOM
Alat peraga ini bekerja mirip dengan atribut HTML yang sesuai, dengan pengecualian kasus khusus yang didokumentasikan di atas Apakah Reactjs menggunakan HTML?Aplikasi React biasanya dibuat dengan satu elemen HTML .
Haruskah saya mempelajari React atau HTML?Anda mungkin memilih untuk mempelajari React karena berbagai alasan. Pertama, ia memiliki kurva belajar yang cepat untuk pengembang baru. Jika Anda bukan pengembang web ahli, React bisa menjadi cara mudah untuk memperkenalkan diri Anda pada banyak konsep HTML, CSS, dan JS sekaligus.
Mengapa Bereaksi, bukan HTML?Di browser, kita perlu membuat ulang tampilan HTML di Document Object Model (DOM). Dengan React, kita tidak perlu khawatir tentang bagaimana menampilkan perubahan ini, atau bahkan mengatur kapan harus melakukan perubahan pada browser; . React will simply react to the state changes and automatically update the DOM when needed. |