Bereaksi useEffect secara mendalam / gunakan useEffect?

10

Saya mencoba memahami useEffecthook secara mendalam.

Saya ingin tahu kapan harus menggunakan metode mana dan mengapa?

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])
javascript reactjs react-redux John_ny
sumber
3
1. Dipanggil saat mount dan setiap pembaruan ketergantungan (setiap perubahan status / alat peraga). 2. Hanya dipanggil di mount karena Anda menentukan daftar dependensi kosong. 3. Dipanggil saat mount dan pada perubahan dependensi yang terdaftar
ajobi
2
Dan Abramov telah menulis posting blog yang bagus tentang useEffect: overreacted.io/a-complete-guide-to-useeffect . Anda harus membacanya ;-)
rphonika

Jawaban:

18 
useEffect(callback)

Berjalan pada setiap komponen render.

Biasanya digunakan untuk debugging, analog dengan eksekusi fungsi pada setiap render:

const Component = () => {
  callback()
  return <></>;
};
useEffect(callback,[])

Berjalan sekali pada mount komponen.

Biasanya digunakan untuk menginisialisasi keadaan komponen dengan pengambilan data dll.

Catatan : The callback dieksekusi setelah yang membuat fase (Dikenal "Gotcha").

useEffect(callback,[arg])

Berjalan pada perubahan dari argnilai.

"On Change" mengacu pada perbandingan dangkal dengan nilai sebelumnya arg(membandingkan nilai dari argrender sebelumnya dan yang sekarang, prevArg === arg ? Do nothing : callback()).

Biasanya digunakan untuk menjalankan acara dengan alat peraga / perubahan negara.

Catatan: Beragam ketergantungan dapat diberikan: [arg1,arg2,arg3...]

Dennis Vash
sumber
1

Jika Anda terbiasa dengan metode siklus hidup kelas React, Anda dapat menganggap useEffect Hook sebagai componentDidMount, componentDidUpdate, dan componentWillUnmount yang digabungkan.

1.useEffect tanpa parameter kedua: Ini digunakan ketika kita menginginkan sesuatu terjadi baik ketika komponen baru saja dipasang, atau jika telah diperbarui. Secara konseptual, kami ingin itu terjadi setelah setiap render.

2.useEffect dengan parameter kedua sebagai []: Ini digunakan ketika kita menginginkan sesuatu terjadi pada saat pemasangan komponen, jika hanya dieksekusi satu kali pada saat pemasangan. Itu lebih dekat ke komponen yang dikenal.

3.useEffect dengan beberapa argumen yang dikirimkan pada parameter kedua: Ini digunakan ketika kita menginginkan sesuatu terjadi pada saat pramter lewat misalnya. args telah berubah dalam kasus Anda.

Untuk info lebih lanjut. periksa di sini: https://reactjs.org/docs/hooks-effect.html

neelesh bisht
sumber
0

3.useEffect dengan beberapa argumen yang dilewatkan di parameter kedua useEffect (() => {}, [arg])

itu akan berjalan dulu kemudian akan berjalan lagi jika arg berubah

Anda lupa juga untuk bertanya bagaimana dengan pengembalian di dalam useEffect ... Penggunaannya untuk pembersihan itu akan berjalan ketika komponen turun

Abu Dujana Mahalail
sumber