Mengapakah useEffect Hook saya Mencetuskan Dua Kali pada Pemasangan Komponen dalam Mod Pembangunan React 18?

useEffect Triggering Twice on Component Mount

Isu:

Apabila menggunakan useEffect dengan tatasusunan kebergantungan yang hanya mengandungi keadaan, fungsi kesan digunakan dua kali pada pemasangan awal dalam pembangunan React 18 mod.

Penjelasan:

React 18 memperkenalkan ciri yang menyokong pemasangan semula komponen dengan keadaan yang sama, yang membolehkan prestasi yang lebih baik di luar kotak tetapi memerlukan komponen untuk dikendalikan kesan dipasang dan dimusnahkan berbilang kali.

Untuk menimbulkan isu yang berpotensi, React menyahlekap dan memasang semula setiap komponen sekali semasa mod pembangunan. Pemasangan semula ini mencetuskan fungsi useEffect untuk kali kedua.

Penyelesaian:

Tingkah laku ini bertujuan dan direka bentuk untuk mendedahkan pepijat sedia ada dalam logik kesan. Pendekatan yang betul ialah melaraskan pelaksanaan kesan untuk mengendalikan berbilang pelekap dengan betul.

Cadangan:

1. Gunakan Fungsi Pembersihan:

Laksanakan fungsi pembersihan useEffect untuk menghentikan atau membuat asal tindakan kesan apabila komponen dinyahlekap. Ini memastikan kesan kesan pada keadaan komponen dan kesan sampingan adalah konsisten antara mod pengeluaran dan pembangunan.

2. Permintaan HTTP Cache:

Gunakan teknik untuk menyahduplikasi dan menyimpan cache permintaan HTTP untuk mengoptimumkan prestasi dan mengelakkan operasi rangkaian yang berlebihan. Pertimbangkan untuk menggunakan pustaka pengambilan data atau cangkuk yang melaksanakan mekanisme cache.

3. Semak Penggunaan UseEffect Anda:

Pastikan useEffect digunakan dengan sewajarnya dan bukan untuk memulakan keadaan aplikasi atau melakukan tindakan yang tidak sepatutnya diulang semasa pemasangan semula. Rujuk kepada prinsip "Bukan Kesan" untuk panduan:

• Bukan Kesan: Memulakan aplikasi
• Bukan Kesan: Membeli produk

Pertimbangan Tambahan:

• Tingkah laku ini hanya berlaku dalam mod pembangunan. Dalam pengeluaran, useEffect akan dipanggil sekali sahaja.
• Percubaan untuk menyelesaikan tingkah laku pemasangan semula menggunakan useRef dan jika pernyataan dalam useEffect atau mengalih keluar StrictMode tidak digalakkan.
• Membaca dokumentasi React terperinci tentang useEffect boleh berikan maklumat lanjut tentang topik tersebut.

Atas ialah kandungan terperinci Mengapakah useEffect Hook saya Mencetuskan Dua Kali pada Pemasangan Komponen dalam Mod Pembangunan React 18?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!