React adalah framework JavaScript front-end. Sementara membangun halaman HTML dan mengelolanya bisa menjadi membosankan, React membuat segalanya lebih mudah dengan memecah elemen di layar dan logikanya menjadi beberapa komponen.

React membawa banyak hal, tetapi salah satu fitur yang paling berguna adalah manajemen status. Dalam artikel ini, Anda akan mempelajari cara mengelola status menggunakan React Hooks. Sebelum melangkah lebih jauh, artikel ini mengasumsikan Anda mengetahui dasar-dasar React.

Apa itu Hook di ReactJS?

Hook adalah konsep baru yang diperkenalkan di React untuk mengelola status dan lainnya fitur dari React. Dengan menggunakan kait di Bereaksi, Anda dapat menghindari penulisan kode panjang yang seharusnya menggunakan kelas. Contoh berikut menunjukkan contoh dari gunakanNegara kait.

const [variabel, setVariable] = useState (nilai awal);

Ini dia variabel adalah negara dan setVariabel adalah fungsi yang mengatur keadaan. gunakanNegara adalah pengait yang menyimpan nilai awal dari variabel status. Jangan khawatir jika ini tidak masuk akal bagi Anda. Pada akhir tutorial ini, Anda akan memiliki pemahaman yang kuat tentang hook.

Ada dua jenis kait:

• Kait Dasar
  1. gunakanNegara
  2. gunakanEfek
  3. gunakanKonteks
• Kait Tambahan
  1. gunakanRef
  2. gunakanMemo
  3. gunakan Peredam

gunakanNegara()

NS gunakanNegara hook membantu mengelola status. Sebelumnya dalam pengembangan React, manajemen negara dilakukan menggunakan kelas. Sintaks status ditulis di dalam konstruktor dan menggunakan ini kata kunci. Dengan pengenalan kait React, pengembang memiliki kebebasan untuk mengelola status menggunakan komponen fungsional.

Anda dapat merujuk ke contoh sebelumnya untuk sintaks hook React. Contoh paling sederhana untuk dijelaskan gunakanNegara() adalah contoh variabel count:

impor {useState} dari "bereaksi";
fungsi Aplikasi() {
const [hitungan, setCount] = useState (0);
kembali (


Contoh kait

{menghitung}

setCount (hitungan+1)}>Tambah
setCount (hitungan-1)}>Kurangi



);
}

NS gunakanNegara hook memiliki variabel dan metode yang digunakan untuk mengatur nilai variabel. NS gunakanNegara hook menerima nilai awal status sebagai parameter. Anda dapat mengatur nilai apa pun untuk variabel hitungan menggunakan set Hitung metode.

Ada dua tombol dalam kode di atas untuk menambah dan mengurangi nilai menghitung variabel. Saat menambah, Anda dapat menambahkan +1 ke status hitungan saat ini dan -1 untuk mengurangi hitungan sebanyak 1.

gunakanEfek

NS gunakanEfek hook memperbarui status di halaman web setelah setiap perubahan status. NS gunakanEfek hook diperkenalkan untuk menghilangkan efek samping dari komponen berbasis kelas. Sebelum pengenalan komponen berbasis fungsi, perubahan status dilacak menggunakan komponen siklus hidup: komponenDidMount dan componentDidUpdate. NS gunakanEfek hook menerima larik dependensi. Semua perubahan dalam variabel status yang disebutkan dalam larik ketergantungan dilacak dan ditampilkan menggunakan gunakanEfek kait.

Contoh klasik menggunakan gunakanEfek kait adalah mengambil data dari API atau menghitung suka atau langganan pada sebuah postingan.

useEffect(()=>{
// kode
},[array dependensi]);

Mengingat contoh di atas

import { useState, useEffect } dari "bereaksi";
fungsi Aplikasi() {
const [hitungan, setCount] = useState (0);
useEffect(() => {
document.title = `Anda telah mengklik ${count} kali`;
}, [menghitung]);
kembali (


Contoh kait

{menghitung}

 setCount (hitungan + 1)}>Tambah



);
}

Saat melewati menghitung variabel keadaan di gunakanEfek dependensi array, ia memeriksa apakah keadaan telah berubah atau tidak. Ini kemudian menetapkan judul dokumen ke variabel count.

gunakanKonteks

NS gunakanKonteks hook membantu melewatkan data melalui komponen tanpa melakukannya secara manual melalui alat peraga. Itu membuat penggunaan API Konteks menjadi cepat dan mudah. Anda akan memiliki pemahaman yang lebih baik setelah menjalankan contoh.

Pertama, pahami bagaimana tampilan kode tanpa menggunakan Konteks. Seperti yang Anda lihat, Anda harus meneruskan teks melalui props ke komponen anak. Untuk menghindari kerumitan, Anda dapat menggunakan gunakanKonteks kait.

ekspor fungsi default App() {
let text = "Halo, Selamat datang di MUO";
kembali (






);
}
const ChildComponent = ({ teks }) => {
kembali 
{teks}
;
};

Pertama, buat Penyedia di file utama Anda (aplikasi.js).

const Konteks = React.createContext (null);

NS Aplikasi komponen adalah komponen tingkat atas atau komponen "induk". Anda perlu membungkus seluruh komponen di dan meneruskan objek atau data yang ingin Anda render pada komponen anak.

ekspor fungsi default App() {
let text = "Halo, Selamat datang di MUO";
kembali (








);
}

Sekarang, buat komponen anak dan akses prop teks menggunakan gunakanKonteks kait. Melewati Konteks variabel menggunakan buatKonteks.

const Komponen Anak = () => {
biarkan teks = useContext (Konteks);
console.log (teks);
kembali 
{teks}
;
};

Terkait: Kerangka JavaScript Layak Dipelajari​​​​​

Lebih Banyak untuk Dijelajahi Dengan React

Anda baru saja mempelajari dasar-dasar hook. Ini adalah salah satu fitur terbaik dari React, dan juga cukup ramah pengembang. React adalah salah satu kerangka kerja frontend terbaik untuk dipelajari hari ini untuk peluang kerja, membuat aplikasi satu halaman, atau hanya untuk memperluas pengetahuan pemrograman Anda.

Berbicara tentang memperluas pengetahuan Anda, mengelola status hanyalah satu keterampilan yang perlu dipraktikkan oleh pengembang Bereaksi. Fitur utama lainnya, seperti alat peraga, layak mendapatkan banyak perhatian Anda.

Cara Menggunakan Alat Peraga di ReactJS

Jika Anda mencari tips tentang cara menggunakan props di ReactJS, Anda berada di tempat yang tepat.

Baca Selanjutnya

Tentang Penulis