Pada Maret 2022, tim React mengumumkan rilis resmi React 18. Rilis ini hadir dengan sejumlah fitur baru yang ditujukan untuk peningkatan kinerja, berdasarkan konsep "render bersamaan". Ide di balik rendering bersamaan adalah untuk membuat proses rendering ke DOM dapat diinterupsi.
Di antara fitur baru adalah lima kait: useId, useTransition, useDerredValue, useSyncExternalStore, dan useInsertionEffect.
React useTransition Hook
Secara default, semua pembaruan status React bersifat mendesak. Pembaruan status yang berbeda dalam aplikasi Anda bersaing untuk sumber daya yang sama, memperlambatnya. Transisi penggunaan Kait reaksi memecahkan masalah ini dengan membiarkan Anda menandai beberapa pembaruan status sebagai tidak mendesak. Ini memungkinkan pembaruan status mendesak untuk mengganggu mereka yang memiliki prioritas lebih rendah.
Komponen Halaman Pencarian
Program sederhana ini meniru mesin pencari yang memperbarui dua status—bidang input dan beberapa hasil pencarian.
impor { status penggunaan } dari "reaksi";
fungsiCariHalaman() {
const [masukan, setInput] = useState("")
konstan [daftar, setList] = useState([]);konstan listSize = 30000
fungsimenanganiPerubahan(e) {
atur masukan(e.target.nilai);
konstan listItem = [];untuk (membiarkan saya = 0; i < ukuran daftar; saya++){
Daftar item.dorongan(e.target.nilai);
}setList (daftarItem);
}kembali (
<div>
<label>Cari di Web: </label>
<jenis masukan ="teks" nilai={input} onChange={handleChange} />
{daftar.map((item, indeks) => {
kembali <kunci div={indeks}>{barang}</div>
})}
</div>
);
}
eksporbawaan Halaman Pencarian;
Komponen Aplikasi yang Diperbarui
impor CariHalaman dari "./Komponen/Halaman Pencarian";fungsiAplikasi() {
kembali (
<div>
< CariHalaman/>
</div>
);
}
eksporbawaan Aplikasi;
Kode di atas membuat aplikasi React dengan kolom input:
Saat Anda mulai mengetik karakter ke dalam bidang, 30.000 salinan teks yang diketik akan muncul di bawah ini:
Jika Anda mengetik beberapa karakter secara berurutan, Anda akan melihat penundaan. Ini memengaruhi waktu yang dibutuhkan karakter untuk muncul di bidang input dan "area hasil pencarian". Ini karena React menjalankan kedua pembaruan status secara bersamaan.
Jika demo berjalan terlalu lambat atau terlalu cepat untuk Anda, coba ubah daftarUkuran nilai sesuai.
Memasukkan kait useTransition ke dalam aplikasi akan memungkinkan Anda memprioritaskan satu pembaruan status di atas yang lain.
Menggunakan useTransition Hook
impor {useState, useTransition} dari "reaksi";fungsiCariHalaman() {
konstan [isPending, startTransition] = useTransition();
const [masukan, setInput] = useState("")
konstan [daftar, setList] = useState([]);konstan listSize = 30000
fungsimenanganiPerubahan(e) {
atur masukan(e.target.nilai);
mulaiTransisi(() => {
konstan listItem = [];untuk (membiarkan saya = 0; i < ukuran daftar; saya++){
Daftar item.dorongan(e.target.nilai);
}setList (daftarItem);
});
}kembali (
<div>
<label>Cari di Web: </label>
<jenis masukan ="teks" nilai={input} onChange={handleChange} />{Tertunda? "...Memuat hasil": list.map((item, indeks) => {
kembali <kunci div={indeks}>{barang}</div>
})}
</div>
);
}
eksporbawaan Halaman Pencarian;
Memperbarui Anda CariHalaman komponen dengan kode di atas akan memprioritaskan bidang input di atas "area hasil pencarian". Perubahan sederhana ini memiliki efek yang jelas: Anda akan segera mulai melihat teks yang Anda ketikkan ke dalam kolom input. Hanya "area hasil pencarian" yang masih akan mengalami sedikit keterlambatan. Hal ini disebabkan oleh mulaiTransisiantarmuka pemrograman aplikasi (API) dari kait useTransition.
Kode yang membuat hasil pencarian ke UI sekarang menggunakan mulaiTransisi API. Ini memungkinkan bidang input untuk mengganggu pembaruan status hasil pencarian. Ketika sedang tertunda() fungsi menampilkan “… Memuat hasil” ini menunjukkan bahwa transisi (dari satu keadaan ke keadaan berikutnya) sedang terjadi.
Bereaksi useDeferredValue Hook
Kait useDeferredValue memungkinkan Anda untuk menunda rendering ulang pembaruan status yang tidak mendesak. Seperti kait useTransition, kait useDeferredValue adalah kait konkurensi. Kait useDeferredValue memungkinkan status untuk mempertahankan nilai aslinya saat sedang dalam transisi.
Komponen SearchPage Dengan Kait useDeferredValue()
impor { useState, useTransition, useDeferredValue } dari "reaksi";fungsiCariHalaman() {
konstan [,startTransition] = useTransition();
const [masukan, setInput] = useState("")
konstan [daftar, setList] = useState([]);konstan listSize = 30000
fungsimenanganiPerubahan(e) {
atur masukan(e.target.nilai);
mulaiTransisi(() => {
konstan listItem = [];untuk (membiarkan saya = 0; i < ukuran daftar; saya++){
Daftar item.dorongan(e.target.nilai);
}setList (daftarItem);
});
}
konstan deferredValue = useDeferredValue (masukan);
kembali (
<div>
<label>Cari di Web: </label>
<jenis masukan ="teks" nilai={input} onChange={handleChange} />{daftar.map((item, indeks) => {
kembali <div key={index} input={deferredValue} >{barang}</div>
})}
</div>
);
}
eksporbawaan Halaman Pencarian;
Pada kode di atas Anda akan melihat bahwa sedang tertunda() fungsi tidak ada lagi. Ini karena nilai yang ditangguhkan variabel dari kait useDeferredValue menggantikan sedang tertunda() berfungsi selama transisi keadaan. Alih-alih daftar hasil pencarian menyegarkan saat Anda mengetik karakter baru, itu akan mempertahankan nilai lama hingga aplikasi memperbarui status.
Bereaksi useSyncExternalStore Hook
Tidak seperti kait useTransition dan useDeferredValue yang berfungsi dengan kode aplikasi, useSyncExternalStore berfungsi dengan pustaka. Ini memungkinkan aplikasi React Anda untuk berlangganan dan membaca data dari perpustakaan eksternal. Kait useSyncExternalStore menggunakan deklarasi berikut:
konstan state = useSyncExternalStore (berlangganan, getSnapshot[, getServerSnapshot]);Tanda tangan ini berisi sebagai berikut:
- negara: nilai penyimpanan data yang dikembalikan oleh kait useSyncExternalStore.
- langganan: mendaftarkan panggilan balik saat penyimpanan data berubah.
- dapatkan Snapshot: mengembalikan nilai penyimpanan data saat ini.
- getServerSnapshot: mengembalikan snapshot yang digunakan selama rendering server.
Dengan useSyncExternalStore, Anda dapat berlangganan seluruh penyimpanan data atau bidang tertentu dalam penyimpanan data.
Bereaksi useInsertionEffect Hook
Kait useInsertionEffect adalah kait React baru lainnya yang bekerja dengan perpustakaan. Namun, alih-alih penyimpanan data, kait useInsertionEffect berfungsi dengan pustaka CSS-in-JS. Kait ini membahas masalah kinerja rendering gaya. Ini menata DOM sebelum membaca tata letak di kait useLayoutEffect.
Bereaksi useId Hook
Anda menggunakan kait useId dalam situasi yang memerlukan ID unik (kecuali kunci dalam daftar). Tujuan utamanya adalah untuk menghasilkan ID yang tetap unik di seluruh klien dan server, menghindari kesalahan ketidakcocokan hidrasi server React. Kait useId menggunakan deklarasi berikut:
konstan id = gunakanId()Dalam deklarasi Indo adalah string unik yang menyertakan : token. Setelah deklarasi, Anda dapat melewati Indo variabel langsung ke elemen (s) yang membutuhkannya.
Nilai Apa yang Ditambahkan oleh Kait Baru Ini untuk Bereaksi?
Kait useTransition dan useDeferredValue adalah kait kode aplikasi. Melalui rendering konkurensi, mereka meningkatkan kinerja aplikasi. Kait useId menangani kesalahan ketidakcocokan hidrasi dengan membuat ID unik di seluruh klien dan server.
Kait useSyncExternalStore dan useInsertionEffect bekerja dengan pustaka eksternal untuk memfasilitasi rendering serentak. Kait useInsertionEffect berfungsi dengan pustaka CSS-in-JS. Kait useSyncExternalStore berfungsi dengan perpustakaan penyimpanan data seperti toko Redux.
Bersama-sama kait ini memberikan dorongan besar untuk kinerja, yang pada gilirannya meningkatkan pengalaman pengguna.
