Bereaksi useEffect secara mendalam / gunakan useEffect?

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])

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...]

• Panduan Lengkap useEffectoleh Dan Abramov
• useEffectAPI .
• Menggunakan pengait efek - Bereaksi dokumen.

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

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