UseEffect Di sebalik tabir dalam React

Sebelum mengetahui lebih lanjut tentang useEffect dan pemahaman mendalam tentang tindak balas. Saya syorkan anda membiasakan konsep javascript ini.

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

Sebagai pembangun reaksi, salah satu konsep yang paling penting ialah memahami cara useEffect berfungsi.

Prinsip penggunaanEffect

UseEffect digunakan untuk melakukan kesan sampingan dalam komponen tindak balas kami.

Apakah kesan sampingan?

Kesan sampingan merujuk kepada sebarang operasi yang berinteraksi dengan dunia di luar sekatan komponen React.

Kami melakukan kesan sampingan apabila kami perlu mencapai bahagian luar komponen tindak balas untuk melakukan sesuatu!!

Beberapa kesan sampingan biasa:

• Mengambil data daripada API.
• Mengemas kini dokumen dan tetingkap DOM.
• Fungsi pemasa setTimeout dan setInterval.

Tandatangan penggunaanEffect dalam tindak balas:

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

Atau hanya berfungsi dengan kod ini:

useEffect(() => { 
    // execute side effect
})

Selepas memberikan beberapa teori asas tentang useEffect, mari kita semak beberapa amalan!!

Satu contoh mudah dengan useEffect:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

Apa yang kita lakukan dalam kod ini?

• Komponen pada mulanya membuat dengan kiraan ditetapkan kepada 0.

• Kait useEffect mengemas kini tajuk dokumen kepada "0 mesej baharu!"

Apabila butang diklik:

• Fungsi setCount dipanggil, menambah keadaan kiraan.
• Komponen dipaparkan semula dengan nilai kiraan yang dikemas kini.
• Kait useEffect dicetuskan sekali lagi, mengemas kini tajuk dokumen untuk menggambarkan kiraan baharu.
• Kod ini menunjukkan penggunaan asas cangkuk useState dan useEffect dalam React untuk mengurus keadaan dan melakukan kesan sampingan, mencipta pembilang ringkas yang mengemas kini tajuk dokumen.

useEffect akan berjalan dengan setiap satu perubahan komponen.

UseEffect dengan tatasusunan kosong

Kami akan melakukan sedikit perubahan dalam kod:

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

Kami menambah tatasusunan kosong dalam parameter useEffect.

• Ia akan berjalan hanya apabila komponen dibuat atau dimulakan.

Ia amat berguna apabila kami mengambil data, dalam kes itu kami tahu kami harus menjalankan bahagian kod sekali sahaja.

useEffect dengan pembolehubah

Variasi useEffect ialah menambah pembolehubah (satu dan lebih).
Apabila var ini menukar bahagian kod akan dijalankan.

Jom semak contoh:

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

Kami telah menambah var baharu dengan useState dan menambah useEffect bergantung kepada newCount.

Ia akan dipaparkan dalam kes ini:

• Pada permulaan komponen untuk menetapkan newCount pada tajuk halaman.
• Selepas mengesan perubahan pada newCount var.

Nota: Anda boleh menghantar lebih banyak pembolehubah dengan menambahkan koma

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

UseEffect dengan fungsi cleanUp

Dalam sesetengah kes, kita perlu membersihkan beberapa fungsi seperti janji.

Kami akan mendalaminya dengan contoh.

Buat pemasa dan tunjukkan dalam halaman.

Kita boleh melakukan ini dengan setInterval, tetapi jika kita tidak melaksanakan pembersihan, pemasa akan menggunakan sumber dan apl akan menjadi perlahan.

Jadi kita perlu mengembalikan clearInterval.

Ini kita ada kodnya.

useEffect(() => { 
    // execute side effect
})

Kesimpulan:

Sedikit ringkasan tentang useEffect.

useEffect.-

UseEffect digunakan untuk melakukan kesan sampingan dalam komponen tindak balas.

Kesan sampingan mungkin:

• Mengambil data daripada API
• Mengemas kini dom - dokumen, tetingkap
• Acara pemasa - setInterval, setTimeOut

useEffect(panggilan balik, kebergantungan)

1 Di mana panggilan balik ialah fungsi - logik sideEffect - Perkara yang hendak dijalankan.
2 Ketergantungan - Tatasusunan pembolehubah (pilihan) - Bila hendak dijalankan.

Akhir sekali kami mempunyai tiga variasi useEffect:

1. UseEffect tanpa kebergantungan - Ia berjalan dengan paparan pertama dan juga dijalankan pada sebarang perubahan yang dikesan.

2. UseEffect dengan tatasusunan kosong - Ia berjalan hanya pada paparan pertama.

3. UseEffect dengan pembolehubah - Ia berjalan pada pemaparan pertama dan berjalan pada perubahan pembolehubah itu.

4. UseEffect dengan fungsi pembersihan - Tamat masa, langganan, pendengar acara atau fungsi lain untuk berhenti melanggan atau tidak diperlukan selepas digunakan ia boleh dilupuskan dengan fungsi pembersihan.

Atas ialah kandungan terperinci UseEffect Di sebalik tabir dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!