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
- useEffect
- useState => Artikel Ini
- useContext => Segera Hadir

useState

Dokumentasi Resmi untuk useState

const [state, setState] = useState(initialState);

1. Keadaan Awal

Array yang berisi dua nilai.

1. Status terbaru
2. Berfungsi untuk memperbarui status ke nilai baru

useStatemenerima nilai awal dan mengembalikan dua nilai: status terbaru dan fungsi untuk memperbarui status. Nilai dikembalikan dalam bentuk array dan biasanya dibaca menggunakan sintaks penghancur array .

setStateadalah fungsi asinkron, jadi penting untuk diingat bahwa mungkin perlu waktu untuk menyelesaikannya. Terkadang keadaan baru membutuhkan perhitungan keadaan sebelumnya. Menghitung keadaan baru berdasarkan keadaan lama dapat dilakukan dengan meneruskan fungsi ke setStatemetode yang disediakan di argumen kedua ( [1]dalam larik javascript) dari larik yang dikembalikan. Penting untuk memastikan bahwa useStatedan useEffectfungsi dijalankan dalam urutan yang sama setiap saat. 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). Dalam perhitungan yang akurat akan dikembalikan ketika urutan fungsi tidak dipertahankan.

Contoh

Memahami useStatenilai kembalian.

Kode berikut dapat diekspresikan dalam berbagai cara.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Mengubah beruang menjadi banteng.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Kode berikut akan menambahkan 27 ke status sebelumnya.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Memahami inisialisasi lambat dari variabel status. React Docs Penjelasan Resmi.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Situs Pribadi
LinkedIn
Instagram