React: Berapa Kerapkah Fungsi Pembersihan Berjalan?

Komponen tindak balas dengan pembolehubah keadaan mencetuskan pemaparan semula apabila pembolehubah tersebut dikemas kini. Ini dijangka dan merupakan salah satu ciri teras React. Selain itu, komponen menawarkan fungsi pembersihan, yang dicetuskan setiap kali komponen "dinyahlekapkan." Tetapi berapa kerapkah fungsi pembersihan ini sebenarnya berjalan?

Nah, seperti yang akan kita terokai dalam tunjuk cara ini, fungsi pembersihan boleh mempunyai berbilang pencetus, tetapi yang biasa ialah kemas kini kepada pembolehubah keadaan apabila ia dipautkan kepada kesan sampingan.

Ringkasnya, jika komponen React anda menggunakan useEffect dan mengikut pembolehubah keadaan tertentu, mari lihat contoh berikut:

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

Fungsi pembersihan akan dipanggil setiap kali kaunter dikemas kini.

Apabila pembolehubah keadaan dikemas kini, React memaparkan semula komponen, yang bermaksud komponen itu perlu "mengalih keluar" dahulu dan kemudian "memaparkannya" semula. Walaupun DOM maya mengoptimumkan nod yang perlu dikemas kini, pada tahap logik, fungsi pembersihan masih dipanggil.

Dalam kebanyakan kes, ini baik dan dijangka. Walau bagaimanapun, jika fungsi pembersihan anda melakukan perkara seperti melaporkan acara, mengalih keluar pendengar, dsb., pastikan itu disengajakan, kerana fungsi pembersihan akan dipanggil berbilang kali berdasarkan pembolehubah keadaan.

Demo

Jom tengok demo.

• Dalam alat pembangun, buka konsol.
• Anda akan melihat dua log:

Child mounted
Page mounted

Ini bermakna kedua-dua komponen, Halaman dan Anak, telah dipaparkan.

• Jika anda masih ingat coretan yang dikongsi di atas, useEffect terikat pada pembilang, yang dinaikkan apabila mengklik butang pertama. Pada masa ini, ia sepatutnya berkata: Kenaikan 0. Mari teruskan dan klik padanya.

• Perhatikan Konsol dan perhatikan bagaimana empat log telah ditambahkan:
  

Child unmounted
Page unmounted
Child mounted
Page mounted

Pembilang pembolehubah keadaan telah dikemas kini dan memandangkan terdapat dua cangkuk useEffect diikat pada pembilang, ini bermakna fungsi pembersihan mereka telah dilaksanakan. Perhatikan bagaimana, untuk komponen Halaman, useEffect terikat pada pembolehubah keadaan, manakala untuk komponen Kanak-kanak, kesan sampingan terikat pada pembolehubah prop, di mana sumbernya masih pembolehubah keadaan pembilang yang sama.

Selain itu, anda boleh melihat butang Bendera Mati, yang mengemas kini pembolehubah keadaan lain yang tidak dikaitkan dengan useEffect. Ini bermakna klik pada butang ini tidak akan mencetuskan fungsi pembersihan.

Kesimpulan

Fungsi pembersihan banyak digunakan dalam React, terutamanya untuk melaporkan perkara sebaik sahaja komponen "selesai". Walau bagaimanapun, berhati-hati tentang mengikat useEffect kepada pembolehubah keadaan. Seperti yang dilihat dalam demo, ini menyebabkan fungsi pembersihan dipanggil setiap kali pembolehubah keadaan dikemas kini, yang mungkin tidak dijangka.

Kebanyakan masa, fungsi pembersihan ditempatkan dalam useEffect tanpa sebarang pembolehubah keadaan.

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

Tidak mengapa untuk mempunyai berbilang cangkuk useEffect dalam satu komponen. Dalam kes ini, anda boleh mempunyai satu yang bertindak balas kepada pembolehubah keadaan dan satu lagi untuk menetapkan fungsi pembersihan.

Child mounted
Page mounted

Untuk menjawab soalan, fungsi pembersihan akan dipanggil apabila komponen dinyahlekapkan. Ini boleh berlaku apabila pengguna menavigasi ke bahagian lain apl atau jika useEffect bergantung pada pembolehubah keadaan, maka ia akan dipanggil N kali setiap kali pembolehubah keadaan itu dikemas kini.

Atas ialah kandungan terperinci React: Berapa Kerapkah Fungsi Pembersihan Berjalan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!