Pengenalan React 18 Versi Terbaru

Oktober 16, 2024

React adalah pustaka front-end Javascript sumber terbuka untuk membangun antarmuka konsumen. React mudah untuk diuji, bekerja dengan cepat, dan efisien, terutama dalam membuat aditif UI yang dapat diskalakan dan digunakan kembali. 

Penegasan rencana peluncuran untuk model React 18 yang akan datang telah dicapai dengan menggunakan tim React. yang bisa didapat dalam versi beta.

Kami akan membahas sejumlah pembaruan fungsi terbaik untuk model reaksi 18 dengan contoh kode di artikel ini.

Memperkenalkan API Root Baru 

Akar di React merujuk kembali ke bentuk statistik tingkat atas yang merender sebuah pohon. Di React 18, kita dapat memiliki dua API root: API root lama dan API root baru. 

API Root Lama 

API root lama adalah API saat ini yang dikenal sebagai pendekatan ReactDOM.render. API root lama sama seperti pemanfaatan dalam model reaksi 17, ini akan membuat root berjalan dalam mode lama. Sebelum mendalami reaksi 18 pada produksi, kehati-hatian dapat diberikan pada penggunaan API root lama. itu akan perlahan-lahan menerapkan penggunaan API root baru. API root lama mungkin tidak digunakan lagi di versi mendatang.

Anda dapat merujuk pada contoh kode yang diberikan di bawah ini:

API Akar Baru

API root baru dapat dicatat dengan ReactDOM membuat pendekatan Root. Pertama-tama kita harus membuat basis melalui pendekatan createRoot dengan detail dasar sebagai masalah untuk menerapkannya. Setelah itu kita harus memberi nama root. render pendekatan dan lewati aplikasi karena parameternya. Dengan menggunakan API root baru, kami akan menggunakan semua kemampuan yang berlipat ganda dan bersamaan yang bisa didapat di React 18.

Anda dapat mengambil referensi dari kode berikut

Perubahan Metode Hidrat

Pendekatan rendering dan pendekatan hidrat serupa. Tapi itu memungkinkan menghubungkan pendengar acara ke elemen HTML di dalam bin yang dirender dengan menggunakan pendekatan server ReactDOM di sisi server. Dengan pendekatan akar hidrat, React 18 menggantikan pendekatan hidrat ini.

Perubahan dalam Panggilan Balik Render

Dari root baru, panggilan balik rendering API dihapus. Tapi kita bisa meneruskannya sebagai properti ke komponen root.

Dari root baru, panggilan balik render API dihapus.

Peningkatan dalam Batching Otomatis

Di React 18, fungsi batching menggabungkan lebih dari satu pembaruan negara menjadi satu rendering ulang yang terkonsolidasi untuk kinerja yang lebih baik. Misalnya, jika Anda mengganti biaya beberapa negara dalam penangan fitur yang mudah. Kemudian, react18 akan mengelompokkan pembaruan tersebut menjadi satu pembaruan dan merender ulang aplikasi hanya satu kali daripada memanggil proses rendering lebih dari satu kali. 

Kinerja aplikasi secara keseluruhan akan meningkat secara signifikan dengan bantuan penggunaan ini. Hal ini juga mencegah aditif dirender dengan pembaruan negara yang tidak lengkap di mana variabel satu negara terbaik diperbarui, yang juga dapat menyebabkan perilaku tidak pantas dalam aplikasi.

Perusahaan pengembang React akan secara rutin menggabungkan semua pembaruan negara, dari mana pun pembaruan tersebut berasal. Oleh karena itu, jika ada pembaruan internal yang bersifat timeout, janji, pengendali peristiwa lokal, atau peristiwa lain, model React 18 akan mengelompokkannya dengan cara yang sama seperti memperbarui peristiwa internal React. Hal ini juga akan meningkatkan kinerja aplikasi secara keseluruhan dan menyebabkan lebih sedikit rendering ulang aditif dibandingkan dengan versi React sebelumnya.

Nonaktifkan Batching Otomatis

Terkadang, kita perlu segera memperbarui komponen setelah setiap perubahan kondisi. Dalam skenario tersebut, untuk menonaktifkan pengelompokan otomatis gunakan metode flushSync.

Ketegangan

Kami dapat menonaktifkan rendering sisi server bereaksi layanan pengembangan asli dengan merender semua komponen di server terlebih dahulu. Kemudian, kita perlu mengirimkan hasilnya sebagai elemen HTML ke browser. 

React akan memuat JavaScript seperti biasa di dalam browser. Kemudian akan menghubungkan elemen HTML yang dihasilkan dari server dengan javascript dan logika hidrasi.

Render aspek server (SSR) memungkinkan kita mengintip materi konten halaman sebelum paket JavaScript massal dan berjalan.

Fitur ketegangan akan menunda rendering komponen dalam pengembangan asli reaksi. Ini pertama kali diperkenalkan di React versi 16.6 dengan hambatan positif dan bantuan sederhana untuk rendering ketegangan.

Versi stabil React 18 akan mendukung fitur suspense lengkap berdasarkan fitur bersamaan, bersama dengan yang berikut:

• Transisi Tertunda: Ini memberikan instruksi kepada komponen untuk menunggu data diselesaikan sebelum melanjutkan transisi keadaan baru.
• Pembatasan Placeholder: Dengan membatasi tampilan placeholder bersarang dan komponen placeholder berturut-turut dengan mengurangi UI thrash.
• Daftar Penangguhan: mengatur komponen sesuai urutan komponen yang perlu diungkapkan kepada pengguna dilakukan oleh SuspendList.

Dari versi sebelumnya, React 18 menangani ketegangan secara berbeda. Ini tampaknya merupakan perubahan besar. Namun dengan pengelompokan otomatis, dampak perubahannya minimal. Proses migrasi aplikasi ke React versi 18 tidak terpengaruh oleh hal ini. 

Ketegangan di React 16 dan 17 sebelumnya disebut ketegangan warisan. Ketegangan yang ditingkatkan di React 18 disebut ketegangan bersamaan.

Secara umum, setiap fungsi suspense lama dan bersamaan memberikan pengalaman konsumen mendasar yang sama, selain menyelesaikan metode Komponen yang Ditangguhkan, seperti dalam contoh berikut.

Berikut adalah contoh penjelasan sederhana tentang bagaimana faktor ketegangan akan bekerja dalam versi React 18 lama dan baru:

• Ketegangan warisan akan segera meningkatkan faktor saudaranya ke DOM. kait/hasil siklus hidupnya juga dapat diaktifkan. Itu tidak akan menunggu komponen yang ditangguhkan untuk diselesaikan.
• Dibandingkan dengan suspense lama, suspense bersamaan tidak akan memasang faktor saudaranya ke DOM dan juga sekarang tidak lagi menjalankan kait/hasil siklus hidupnya hingga komponen yang ditangguhkan diselesaikan. Semua masalah yang ada dalam ketegangan lama dapat diselesaikan melalui peningkatan baru tersebut.

Konkurensi

Untuk menjalankan banyak tugas secara bersamaan, konkurensi membantu Anda. Jika kita mengambil layanan pengembangan aplikasi asli reaksi standar, misalnya. Konkurensi memungkinkan interaksi UI dengan komponen reaksi pada titik waktu yang sama ketika kita menjalankan tindakan animasi dalam sebuah komponen.

Sebelumnya, semua pembaruan memiliki prioritas yang sama, dan pembaruan hanya pada satu status yang ditetapkan dapat dilakukan. Transisi awal API membantu fitur konkurensi baru menandai semua pembaruan sebagai tidak mendesak. React akan menginterupsi atau menundanya, berdasarkan prioritas yang diberikan.

Kesimpulan

Kami berusaha memberikan informasi yang terbaik dan semoga informasi yang diberikan diatas dapat bermanfaat bagi anda. Untuk komunitas pengembang, React 18 versi stabil akan menghadirkan serangkaian fitur baru yang menarik. Kesadaran penting adalah pada konkurensi dan memperlambat gradasi ke model yang lebih modern. Karena milnya masih dalam versi beta, The bereaksi perusahaan pengembangan asli menciptakan organisasi pengoperasi untuk menyatukan lingkungan untuk memudahkan transisi ke model baru.