𝗣𝗮𝗻𝗱𝘂𝗮𝗻 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗱𝗮𝗹𝗮𝗺 𝗥𝗲𝗮𝗰𝘁

Bar kata laluan anda berubah daripada lemah kepada kuat semasa anda menaip. React mengingati apa yang anda taip melalui state.

State menyimpan data. Ia menjejak apa yang anda taip atau klik.

Bayangkan anda menaip nama anda.

  • State permulaan anda ialah rentetan kosong (empty string).
  • Anda menaip J.
  • Anda memanggil fungsi untuk mengemas kini state daripada "" kepada "J".
  • Anda menaip o.
  • Anda memanggil fungsi untuk mengubah state kepada "Jo".

Setiap kali anda mengemas kini state, React akan melakukan re-render pada UI. Re-rendering bermaksud React memadam paparan lama dan melukis paparan baharu dengan data anda yang telah dikemas kini.

Mengapa tidak menggunakan pemboleh ubah biasa? Pemboleh ubah biasa berubah dalam kod anda tetapi tidak mengemas kini skrin. Pengguna anda akan melihat data lama. State React menyelesaikan masalah ini dengan menghubungkan data anda kepada UI anda.

Cara menggunakan useState:

  1. Import ia daripada React. import { useState } from 'react';

  2. Deklarasikan ia. const [age, setAge] = useState(20);

Dalam contoh ini:

  • age ialah nilai semasa anda.
  • setAge ialah fungsi untuk mengubah nilai tersebut.
  • 20 ialah nilai permulaan anda.

Cuba ini sekarang. Buka projek React. Bina satu kaunter. Klik butang untuk mengemas kini kiraan. Perhatikan skrin berubah serta-merta.

Sumber: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i