Perjalanan Reaksi Saya: Hari ke-26

Kaedah Kitar Hayat & Rendering Bersyarat

Hari ini menandakan satu lagi langkah dalam perjalanan pembelajaran React saya, dan semuanya mengenai Kaedah Kitaran Hayat dan Rendering Bersyarat. Memahami cara komponen React dilahirkan, berkembang dan akhirnya meninggalkan DOM telah menjadi pengubah permainan bagi saya. Tambahkan pada itu keupayaan untuk memaparkan kandungan secara bersyarat berdasarkan interaksi pengguna, dan tiba-tiba, membina apl dinamik dan mesra pengguna terasa begitu manis!

Kaedah Kitar Hayat dalam Komponen Fungsi Tindak Balas
Kitaran hayat mempunyai 3 langkah:

1.Langkah Permulaan (Fasa Pemasangan):

• Berlaku apabila komponen dipaparkan buat kali pertama.
• useEffect dengan tatasusunan kebergantungan kosong ([]) berjalan hanya semasa fasa ini. Contoh:

useEffect(() => {
  console.log("Component mounted");
}, []);

2.Langkah Kemas Kini:

• Dicetuskan apabila keadaan atau prop berubah.
• React menjalankan semula komponen fungsi anda, mengira semula keadaan dan menghantar prop yang dikemas kini.
• Gunakan useEffect dengan kebergantungan khusus untuk mengendalikan perubahan:

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

3. Fasa Keluar / Nyahlekap:

• Berlaku apabila komponen dialih keluar daripada DOM.
• Kod pembersihan boleh ditambah dalam fungsi pulangan useEffect untuk melepaskan memori. Contoh:

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

Pemarahan Bersyarat

Teknik ini penting untuk memaparkan komponen atau elemen secara dinamik berdasarkan keadaan.

Operator Ternary
ContohUserGreetings:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

Penilaian Litar Pintas
Untuk keadaan yang lebih mudah, anda boleh menggunakan && untuk memaparkan komponen hanya apabila syarat adalah benar:

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

Gaya Bersyarat Sebaris
Anda juga boleh menggayakan komponen secara dinamik:

const messageStyle = props.isLoggedIn
  ? { warna: "hijau" }
  : { warna: "merah" };

kembali <h2>



<p><em>Ini terus menjadi lebih baik dari hari ke hari</em></p>


          

            
        

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari ke-26. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!