Mengapa UseEffect Saya Berjalan Dua Kali dalam StrictMode React 18, dan Bagaimana Saya Boleh Membetulkannya?

useEffect Running Twice: Handling It Effectively in React

Mengapa useEffect dipanggil dua kali pada mount dalam React 18 apabila dalam mod pembangunan dengan StrictMode didayakan?

Memahami Sebab

React 18, dengan StrictMode diaktifkan, memasang semula komponen semasa pemaparan awal untuk meningkatkan prestasi dan membantu dalam pengesanan pepijat. Pemasangan semula ini memastikan komponen berjaya mengendalikan kedua-dua pelekap dan nyahlekap beberapa kali.

Kesan Berlaku Berbilang Kali: Adakah Ia Satu Isu?

Kebanyakan kesan berfungsi dengan betul walaupun dipasang berbilang dan nyahlekap. Walau bagaimanapun, kesan tertentu mungkin menghadapi masalah jika mereka mengabaikan untuk membersihkan langganan dengan betul atau menganggap satu kitaran hayat mount-unmount tunggal.

Senario Biasa Di Mana Pelbagai Panggilan Bermasalah

Lazim situasi di mana panggilan berbilang kesan boleh menyebabkan masalah termasuk:

• Permintaan HTTP: Kesan yang membuat permintaan pelayan boleh menghantar permintaan yang berlebihan dan membawa kepada tingkah laku yang tidak dijangka.
• Kesan Berasaskan Selang: Kesan yang melibatkan selang penetapan mungkin terus berjalan selepas komponen dinyahlekap, menyebabkan kebocoran memori dan tidak dijangka hasil.

Penyelesaian untuk Mengendalikan Berbilang Panggilan

Daripada menghalang StrictMode atau menggunakan penyelesaian yang kompleks, React menggalakkan pembangun untuk melaksanakan kesan mantap yang mengendalikan berbilang panggilan dengan anggun. Ini melibatkan pelaksanaan fungsi pembersihan yang menentang tindakan persediaan kesan.

Fungsi Pembersihan

Fungsi pembersihan biasanya:

• Hentikan atau buat asal kesannya operasi.
• Mencegah kesan sampingan daripada berterusan selepas komponen dinyahlekap.
• Batalkan permintaan, kosongkan selang atau batalkan sebarang langganan yang dibuat oleh kesan tersebut.

Contoh: Mengendalikan Permintaan HTTP Berbilang

Berikut ialah contoh pengendalian berbilang permintaan HTTP masuk useEffect:

useEffect(() => {
  const abortController = new AbortController();

  const fetchUser = async () => {
    try {
      const res = await fetch("/api/user/", {
        signal: abortController.signal,
      });
      // Process the response data
    } catch (error) {
      if (error.name !== "AbortError") {
        // Handle non-aborted errors
      }
    }
  };

  fetchUser();

  return () => abortController.abort();
}, []);

Faedah Kesan Teguh

Kesan teguh yang mengendalikan berbilang panggilan dengan berkesan:

• Tingkatkan prestasi dan mengelakkan kebocoran memori .
• Pastikan tingkah laku bebas pepijat walaupun dalam mod pembangunan semasa melekap semula menjadi jelas.
• Selaras dengan garis panduan pembangunan React dan keserasian dengan versi akan datang.
• Memudahkan kod yang lebih dipercayai dan boleh diselenggara.

Atas ialah kandungan terperinci Mengapa UseEffect Saya Berjalan Dua Kali dalam StrictMode React 18, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!