Mengapa Komponen Reaksi Saya Dipaparkan Dua Kali?

React Component Rendering Dua Kali: Menyelesaikan Masalah

React dikenali kerana kecekapannya dalam memberikan hanya perubahan yang diperlukan pada UI. Walau bagaimanapun, kadangkala pembangun menghadapi masalah apabila komponen menghasilkan dua kali tanpa sebab yang jelas. Isu ini boleh membingungkan terutamanya apabila data yang diberikan nampaknya betul pada pemaparan kedua.

Kajian Kes: Rendering Komponen Carian Nombor Telefon Dua Kali

Dalam bidang tertentu kes, pembangun menghadapi isu ini dalam komponen React yang bertanggungjawab untuk mencari titik yang dikaitkan dengan nombor telefon yang ditarik daripada parameter URL. Komponen dipaparkan dua kali: paparan pertama hanya memaparkan nombor telefon dengan mata sifar, manakala paparan kedua memaparkan semua data dengan betul.

Penyelesaian: Penyahpepijatan Mod Ketat

Setelah memeriksa kod sumber komponen yang disediakan oleh pembangun, ternyata bahawa komponen itu berjalan dalam Mod Ketat React. Mod ini sengaja mencetuskan penggunaan dua kali fungsi pemaparan dalam persekitaran pembangunan untuk membantu mengesan potensi kesan sampingan semasa proses pemaparan.

Melumpuhkan Mod Ketat

Untuk menyelesaikan masalah isu, pembangun mengulas teg mod ketat dalam fail index.js apl mereka. Mod Ketat ini dengan berkesan melumpuhkan, membawa kepada pemaparan tunggal yang dijangkakan bagi komponen.

React.StrictMode: Tujuan dan Kesan

Sedangkan Mod Ketat boleh berguna untuk nyahpepijat kesan sampingan, adalah penting untuk memahami tingkah lakunya. Ia beroperasi semata-mata dalam mod pembangunan dan mencetuskan panggilan dua kali bagi fungsi pemaparan untuk membantu mengenal pasti sebarang kesan sampingan yang tidak disengajakan.

Rujuk kepada dokumentasi React rasmi untuk mendapatkan maklumat lanjut tentang potensi kesan sampingan yang mungkin membawa kepada pemaparan tambahan dalam React.StrictMode:

• https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Atas ialah kandungan terperinci Mengapa Komponen Reaksi Saya Dipaparkan Dua Kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!