Dasar-dasar React Hooks, useState Hooks

Dalam cerita ini kita akan membahas semua dasar - dasar tentang react hook dan belajar tentang react hook bawaan yang disebut useState ().

Prasyarat -

Anda harus mengetahui dasar-dasar HTML, Javascript, Apa itu React dan bagaimana cara kerjanya .

Dan jika Anda memenuhi prasyarat ini, maka Anda siap melakukannya .

Apa itu React Hooks?

• React Hooks diperkenalkan di React 16.8 .
• React hooks pada dasarnya adalah fungsi yang memungkinkan Anda menangani status aplikasi web, dan memungkinkan Anda dengan mudah bekerja dengan fitur React lainnya seperti componenDidMount () , componenDidUpdate () tanpa kelas penulisan .
• Anda dapat menggunakan kait React hanya di komponen fungsional , bukan di komponen yang ditentukan kelas.
• Dengan kata sederhana, kita dapat mendefinisikan react hooks sebagai fungsi yang memungkinkan Anda “menghubungkan” ke status React dan fitur siklus hidup dari komponen fungsional .
• Ada banyak jenis kait React bawaan -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

Apa itu useState?

• useState adalah salah satu hook React yang paling umum dan paling banyak digunakan.
• useState digunakan sebagai kait manajemen negara dari komponen tertentu.
• hook useState digunakan untuk menangani status komponen kita.
• useState memungkinkan kita membuat dan menangani variabel status dengan mudah dan nyaman.
• Dalam useState kami menetapkan status awal variabel status dan menggunakan fungsi yang ditentukan useState untuk mengubah status variabel status tersebut dari status awal ke status saat ini .
• Kita hanya dapat menggunakan useState dalam komponen fungsional bukan dalam komponen berbasis kelas .
• useState sama dengan this.statedan this.setStatedi komponen berbasis kelas React .
• Jangan khawatir, jika Anda tidak memahami state dan useState dengan benar, itu akan menjadi jelas di kepala Anda setelah Anda memahaminya dengan contoh kode.

Pada bagian ini, saya akan membuat penghitung sederhana menggunakan hook useState sehingga Anda dapat dengan mudah memahami cara kerja useState dan kapan menggunakannya.

• Kode -
• Penjelasan Kode -
• Di baris kode ini kami telah mengimpor useStatehook dari ‘react’.
• Setelah itu kita akan membuat komponen fungsional yang disebut Appdalam file App.js.
• Dalam komponen fungsional itu kita akan membuat variabel keadaan yang disebut count dan fungsi useState dipanggil setCount.
• Pada baris ke - 6 dari kode ini kita menggunakan hook useState di mana kita telah membuat variabel state dipanggil count dan untuk mengubah keadaan hitungan itu kita telah membuat sebuah fungsi yang disebut setCount.
• Di sini, di useState(0)0 keadaan awal count terindikasi dari state varibale. Jadi pada awalnya ketika komponen App kita memuat nilai count variabel keadaan akan menjadi 0. Dan dengan menggunakan setCountmetode ini kita akan dapat mengubah nilai count variabel keadaan.
• Sekarang kita telah membuat metode yang disebut decreamentyang akan mengurangi count nilai variabel status sebesar 1 setiap kali kita mengklik tombol (pengurangan -) . Pada dasarnya apa yang dilakukan metode ini adalah akan mengatur status countvariabel untuk count-1menggunakan setCountmetode.
• Sekarang kita telah membuat metode yang disebut increamentyang akan menaikkan count nilai variabel status sebesar 1 setiap kali kita mengklik tombol (increment +) . Pada dasarnya apa yang dilakukan metode ini adalah akan mengatur status countvariabel untuk count+1menggunakan setCountmetode.
• Di return bagian kode ini sudah cukup jelas dan di tombol ( increment +) kita telah melewatkan increament metode dalam onClick acara dan di tombol (decrement-) kita telah melewati decreamentmetode.

Kesimpulan

Jadi di sini, di artikel ini, kami telah membahas dasar - dasar hook React dan apa itu hook useState, bagaimana cara kerjanya dan bagaimana menerapkannya .

Semoga kalian menikmati membaca dan belajar.

Jika Anda menyukai artikel ini, silakan tinggalkan tepuk dan bagikan dengan orang lain sehingga mereka juga dapat belajar darinya.