React: Berapa Kerapkah Fungsi Pembersihan Berjalan?

Barbara Streisand
Lepaskan: 2024-11-01 12:50:46
asal
639 orang telah melayarinya

React: How Often Does a Cleanup Function Run?

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]);
Salin selepas log masuk
Salin selepas log masuk

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
Salin selepas log masuk
Salin selepas log masuk

React: How Often Does a Cleanup Function Run?

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
Salin selepas log masuk

React: How Often Does a Cleanup Function Run?

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]);
Salin selepas log masuk
Salin selepas log masuk

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
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!