React Hooks memungkinkan Anda menggunakan status dan fitur React lainnya tanpa harus membuat komponen kelas React. Dengan menggunakan hook, Anda dapat membuat aplikasi React yang beroperasi penuh secara eksklusif dengan Function Components. Tidak class Example extends React.component {}diperlukan lagi.

Pengait Dasar

Kait sehari-hari untuk kasus penggunaan sehari-hari.

Kait Dasar Bereaksi
- useState
- useEffect => Artikel Ini
- useContext => Segera Hadir

useEffect

Dokumentasi Resmi untuk useEffect

argumen fungsi useEffect

1. Fungsi yang akan dieksekusi selama siklus hidup komponen.
2. Susunan nilai useEffect mengawasi perubahan untuk memicu pengaktifan. Melewati array kosong akan meniru komponen componentDidMountdan componentWillUnmountmetode React berbasis kelas.

Keterangan

useEffectdigunakan untuk menjalankan kode setiap kali (dimungkinkan untuk membatasi pengaktifan fungsi pada kondisi tertentu) komponen dirender di layar. Dimungkinkan untuk menggunakan banyak instance useEffectdalam satu komponen, tetapi pastikan mereka selalu mengeksekusi dalam urutan yang sama. Jika useStatedan useEffectfungsi tidak menyala dalam urutan yang sama, Anda akan mengalami waktu yang sangat buruk (lebih lanjut tentang menyelesaikan pengurutan yang benar di bawah). useEffectfungsi juga dapat membersihkan sendiri dengan mengembalikan fungsi.

Contoh

Memahami penggunaan dasar dan pembersihan setelah eksekusi.

Kode berikut akan dieksekusi setelah setiap render.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Situs Pribadi
LinkedIn
Instagram