Siri React: useState vs useRef

Apabila anda memulakan perniagaan, useState dan semua keanehannya boleh menjadi cukup menggembirakan. Sekarang masukkan useRef ke dalam adunan dan anda akan mendapat letupan otak yang kuat.

Saya fikir adalah berguna untuk menyelami lebih mendalam tentang teknikal useRef vs useState, kerana jurutera biasanya mengalami kesukaran untuk memahami perbezaan antara mereka dan masa untuk memilih satu daripada yang lain.

Berikut ialah takrifan saya untuk setiap satu, secara ringkas dan jelas terlalu ringkas:

useState ialah cangkuk yang membolehkan anda mengakses dan mengemas kini nilai, mencetuskan pemaparan semula.

useRef ialah cangkuk yang membolehkan anda merujuk nilai yang tidak diperlukan untuk pemaparan.

Anda mungkin bertanya kepada diri sendiri, mengapa adakah penting untuk memahami perkara yang dibawa oleh setiap satu? Nah, anda mungkin tergoda untuk memasukkan useState ke dalam segala-galanya, semata-mata kerana ia berfungsi.

Ya, Namun, semakin kompleks apl anda dengan komponen yang melepasi prop keadaan 5 tahap ke bawah, mencetuskan banyak kemas kini yang tidak perlu di sepanjang jalan, anda mungkin akan mula menghadapi masalah prestasi lebih awal daripada yang anda bayangkan.

Satu lagi tanggapan salah banyak pembangun ialah berfikir bahawa useRef hanya boleh memanipulasi dan mengakses elemen DOM, yang menyedihkan kerana anda semua kehilangan 99 perkara lain¹ useRef boleh lakukan.

Mari mulakan dengan useState! Buka telingamu sekarang, dev sayangku ʕ◉ᴥ◉ʔ

✨ useState

useState ialah cara yang berkuasa tetapi mudah untuk mengemas kini paparan sebaik sahaja nilai pembolehubah berubah, ia memastikan nilai terkini disegerakkan dengan skrin tanpa melakukan sebarang operasi sendiri secara manual. Sintaks pengisytiharan adalah seperti ini const [memesILiked, setMemesILiked] = useState(9000).

Sekarang, mari kita bincangkan tentang perkara yang berlaku di bawah hud apabila anda melakukan operasi dengan useState.

Mengemas kini nilai keadaan mencetuskan pemaparan semula, dan seperti yang anda bayangkan, pemaparan semula paparan ialah operasi SANGAT yang mahal untuk dikendalikan oleh penyemak imbas. Begini cara React dan penyemak imbas beroperasi bersama-sama untuk memastikan apl anda dikemas kini:

1. Pencetus Peristiwa: Peristiwa mencetuskan kemas kini keadaan. Satu klik, pemasa atau apa sahaja sebenarnya.
2. Kemas Kini Negeri: setState dipanggil dan menjadualkan kemas kini untuk komponen, komponen ditandakan sebagai "kotor" (memerlukan paparan semula).
3. Fasa Penyesuaian: React memulakan penyelarasan antara DOM maya baharu dan DOM maya lama. Ia secara rekursif memaparkan semula komponen dan semua anak-anaknya.
4. Menyemak perbezaan: React membandingkan pepohon DOM maya baharu dengan pepohon sebelumnya. Perubahan disimpan dalam senarai kemas kini untuk digunakan pada DOM sebenar.
5. Fasa Render: Kaedah pemaparan atau komponen fungsi dipanggil dengan keadaan baharu.
6. Fasa Komit: React menggunakan perubahan daripada proses pembezaan kepada DOM sebenar.
7. Kemas kini DOM: DOM sebenar dikemas kini untuk mencerminkan keadaan baharu. Penyemak imbas melukis semula DOM, mengemas kini UI secara visual.
8. Kesan Selepas paparan: Sebarang kesan yang dijadualkan untuk dijalankan selepas komponen dipamerkan semula dipanggil. Ini termasuk cangkuk useEffect yang didaftarkan dengan kebergantungan yang berubah semasa pemaparan.

Fuh, itu banyak perkara... Walaupun proses di atas memastikan UI anda kekal selaras dengan keadaan aplikasi anda, ia juga menyerlahkan sebab pemaparan semula yang berlebihan atau tidak perlu boleh membawa kepada isu prestasi . Nasib baik, React menyediakan beberapa strategi dan alatan untuk membantu mengoptimumkan proses ini, seperti useMemo dan useCallback, tetapi itu di luar skop artikel ini!

Ringkasnya, useState ialah cangkuk yang cukup berguna, dan apabila digunakan dengan betul, ia boleh memberikan pengguna pengalaman yang hebat. Ambil togol tema, sebagai contoh. Dengan useState, anda boleh menukar antara mod terang dan gelap dengan mudah, memberikan pengguna anda kepuasan segera apabila melihat perubahan apl berdasarkan pilihan mereka.

✨ useRef

Sekarang, mari bincang useRef. Walaupun useState adalah mengenai mencetuskan pemaparan semula apabila keadaan berubah, useRef adalah seperti pemerhati senyap yang tidak pernah mahu menarik perhatian kepada dirinya sendiri. Ia sesuai untuk menyimpan nilai boleh ubah yang tidak memerlukan pemaparan semula apabila ia berubah. Sintaks kelihatan seperti const memeRef = useRef(null).

useRef paling kerap digunakan untuk mengakses elemen DOM secara langsung. Sebagai contoh, jika anda perlu memfokuskan medan input secara pengaturcaraan, useRef boleh memegang rujukan kepada elemen tersebut. Tetapi keupayaan useRef melangkaui akses DOM sahaja. Ia juga boleh menyimpan sebarang nilai boleh ubah! Dan ini, kawan-kawan saya, di mana keajaiban berlaku ??? (pada pendapat saya pula).

Fikirkan seperti ini: useRef ialah cara untuk mengekalkan nilai merentas pemaparan tanpa mencetuskan pemaparan semula. Ini menjadikannya sempurna untuk menyimpan data seperti pemasa, pembilang atau keadaan komponen sebelumnya. Tidak seperti useState, mengemas kini ref tidak memberitahu React untuk memaparkan semula komponen anda. Ia hanya mengemas kini nilai secara senyap-senyap dan meneruskan perniagaannya.

Berikut ialah contoh praktikal: katakan anda mahu melaksanakan pembilang mudah, tetapi anda tidak mahu UI dikemas kini setiap kali anda menambah pembilang. Anda boleh menggunakan useRef untuk menyimpan nilai kaunter. Kaunter akan meningkat seperti yang dijangkakan, tetapi kerana komponen tidak mengambil berat tentang nilai rujukan ini untuk tujuan pemaparan, tiada pemaparan semula akan berlaku.

useRef juga hebat dalam mengekalkan nilai terkini sesuatu keadaan tanpa menyebabkan pemaparan tambahan. Contohnya, jika anda menggunakan selang untuk mengemas kini nilai, tetapi anda tidak mahu nilai itu mencetuskan pemaparan semula setiap milisaat, useRef ialah alat yang anda gunakan. Ia membenarkan nilai berubah di latar belakang, memastikan UI anda responsif dan mengelakkan pemaparan semula yang tidak perlu.

Ringkasnya, useRef paling sesuai digunakan untuk:

• Mengakses elemen DOM: Kes penggunaan klasik, seperti memfokuskan medan input.
• Menyimpan nilai boleh ubah: Itu tidak memerlukan pemaparan semula, seperti pemasa atau nilai sebelumnya.
• Mengekalkan nilai merentas pemaparan: Tanpa menyebabkan pemaparan semula, memastikan UI anda lancar dan cekap.

Sekarang anda HARGANYA memahami perbezaannya (jika saya telah menjalankan tugas saya dengan betul²), mari kita selami beberapa kes penggunaan yang tidak begitu biasa. Saya akan menumpukan pada useRef sedikit lagi kerana saya merasakan ia adalah wira yang tidak didendang di sini.

1. Status Pemasangan Komponen Penjejakan: useRef boleh digunakan untuk menjejak sama ada komponen dipasang atau dinyahlekap, ini berguna untuk mengelakkan kemas kini keadaan selepas dinyahlekap.

2. Memegang Nilai Statik: Untuk menyimpan nilai statik yang tidak berubah antara pemaparan, seperti nilai pemalar atau cache, useRef lebih cekap daripada useState.

3. Mencegah Permulaan Semula: Jika anda mahu menghalang sekeping kod daripada menjalankan semula setiap pemaparan (contohnya, memulakan sambungan WebSocket).

4. Menyimpan Panggilan Balik Terdahulu: Jika anda perlu menyimpan rujukan kepada fungsi panggil balik sebelumnya, useRef boleh menyimpan rujukan fungsi sebelumnya tanpa menjejaskan kitaran pemaparan komponen.

5. Merujuk ID Pemasa: Apabila bekerja dengan pemasa (seperti setTimeout atau setInterval), simpan ID pemasa dalam useRef untuk mengelak daripada mencetuskan pemaparan semula setiap kali pemasa ditetapkan atau dikosongkan.

6. Mencetuskan Animasi: Untuk mencetuskan animasi secara imperatif (seperti peralihan CSS atau animasi tatal), useRef boleh digunakan untuk berinteraksi secara langsung dengan elemen DOM tanpa menyebabkan pemaparan semula.

✨ Kesimpulan

Walaupun useState penting untuk mengurus dan bertindak balas terhadap perubahan keadaan yang sepatutnya mencetuskan pemaparan semula, useRef ialah rakan kongsi senyap yang membantu anda mengurus keadaan tanpa mengganggu UI.

Mengetahui masa untuk menggunakan setiap satu boleh menyelamatkan anda daripada potensi isu prestasi dan menjadikan aplikasi React anda lebih cekap dan boleh diselenggara!

Terima kasih kerana membaca, jika anda berjaya di sini, PAWS UP DAN HIGH FIVE! ⊹⋛⋋( ՞ਊ ՞)⋌⋚⊹

Nota kaki:
¹ Jelas sekali keterlaluan.
² Saya agak dramatik, sekiranya anda tidak tahu.

Atas ialah kandungan terperinci Siri React: useState vs useRef. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!