Rumah >hujung hadapan web >tutorial js >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:
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:
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 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:
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:
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:
UseEffect tanpa kebergantungan - Ia berjalan dengan paparan pertama dan juga dijalankan pada sebarang perubahan yang dikesan.
UseEffect dengan tatasusunan kosong - Ia berjalan hanya pada paparan pertama.
UseEffect dengan pembolehubah - Ia berjalan pada pemaparan pertama dan berjalan pada perubahan pembolehubah itu.
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!