ReactJS - Pengurusan State

Hai sana, bakal bintang React! ? Hari ini, kita akan melihat salah satu konsep yang paling penting dalam React: Pengurusan State. Jangan khawatir jika anda baru dalam programming; saya akan mengarahkan anda dalam perjalanan ini langkah demi langkah. Jadi, ambil minuman kesukaan anda, dan mari kita mulakan!

Apa itu state?

Imagin anda membina rumah daripada kad. Setiap kad mewakili sejenis maklumat dalam aplikasi anda. Apa yang terjadi jika anda perlu mengubah kedudukan kad tersebut? Betul, ia mempengaruhi keseluruhan strukturnya! Dalam React, kami menyebut maklumat yang dinamik dan boleh diubah ini "state."

State adalah seperti ingatan komponen React anda. Ia menyimpan data yang boleh berubah sepanjang masa, dan apabila ia berubah, React memperbaharui antara muka pengguna anda secara efektif untuk mencerminkan perubahan itu.

Mari kita lihat contoh ringkas:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p Anda menekan {count} kali</p>
<button onClick={() => setCount(count + 1)}>
Tekan saya
</button>
</div>
);
}

Dalam contoh ini, count adalah state kami. Ia bermula dengan 0 dan meningkat setiap kali kita menekan butang. Magiknya ialah React secara automatik akan mengulangi penerapan komponen kami apabila count berubah, memperbaharui apa yang kita lihat di skrin.

Menentukan State

Sekarang kita memahami apa itu state, mari kita belajar bagaimana untuk mentakrifkan ia dalam komponen React kami. Dalam React modern, kita menggunakan hook useState untuk mentakrifkan state. Jangan khawatir jika "hook" kelihatan menakutkan - ia hanya fungsi khas yang membolehkan kita menambah ciri-ciri React ke komponen kami.

Ini adalah sintaksis asas:

const [stateName, setStateName] = useState(initialValue);

Mari kitaura ini:

• stateName: Ini adalah nama pembolehubah state anda.
• setStateName: Ini adalah fungsi yang membolehkan anda mengemaskini state.
• initialValue: Ini adalah nilai awal state anda.

Mari kita lihat ini dalam tindakan dengan contoh yang lebih kompleks:

import React, { useState } from 'react';

function UserProfile() {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [isStudent, setIsStudent] = useState(false);

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Masukkan nama anda"
/>
<input
type="number"
value={age}
onChange={(e) => setAge(parseInt(e.target.value))}
placeholder="Masukkan umur anda"
/>
<label>
<input
type="checkbox"
checked={isStudent}
onChange={(e) => setIsStudent(e.target.checked)}
/>
Adakah anda pelajar?
</label>
<p>Nama: {name}</p>
<p>Umur: {age}</p>
<p>Pelajar: {isStudent ? 'Ya' : 'Tidak'}</p>
</div>
);
}

Dalam contoh ini, kita telah mentakrifkan tiga pembolehubah state: name, age, dan isStudent. Setiap satu menggunakan jenis data yang berbeza (teks, nombor, dan boolean), menunjukkan betapa universal state boleh menjadi.

Membuat objek State

Kadang-kadang, anda mungkin mahu mengumpulkan pembolehubah state yang berkaitan. Dalam kes seperti itu, anda boleh membuat objek state. Ini adalah terutamanya berguna apabila anda mempunyai banyak pembolehubah state atau apabila mereka membentuk kumpulan logik.

Ini adalah bagaimana anda boleh membuatnya:

import React, { useState } from 'react';

function BookForm() {
const [book, setBook] = useState({
title: '',
author: '',
year: 2023,
isPublished: false
});

const handleInputChange = (e) => {
const { name, value, type, checked } = e.target;
setBook(prevBook => ({
...prevBook,
[name]: type === 'checkbox' ? checked : value
}));
};

return (
<form>
<input
type="text"
name="title"
value={book.title}
onChange={handleInputChange}
placeholder="Judul Buku"
/>
<input
type="text"
name="author"
value={book.author}
onChange={handleInputChange}
placeholder="Nama Penulis"
/>
<input
type="number"
name="year"
value={book.year}
onChange={handleInputChange}
placeholder="Tahun Penerbitan"
/>
<label>
<input
type="checkbox"
name="isPublished"
checked={book.isPublished}
onChange={handleInputChange}
/>
Adakah Diterbitkan?
</label>
<p>Butiran Buku: {JSON.stringify(book)}</p>
</form>
);
}

Dalam contoh ini, kita telah membuat objek state book yang mengandungi semua maklumat tentang buku. Fungsi handleInputChange menggunakan operator penyebaran (...) untuk membuat objek baru dengan semua sifat book yang ada, kemudian mengemaskini sifat tertentu yang berubah.

Pendekatan ini adalah terutamanya berguna apabila anda berurusan dengan borang atau mana-mana senario di mana anda mempunyai banyak maklumat state berkaitan.

Metod untuk Pengurusan State

Berikut adalah jadual yang menggabungkan metod utama yang kita diskusi untuk mengurus state dalam React:

Metod	Keterangan	Kes用途
useState	Hook untuk menambah state ke komponen fungsi	Pengurusan state ringkas
State Objects	Menggunakan objek untuk mengumpulkan pembolehubah state berkaitan	Borang kompleks, data berkaitan
Spread Operator	Digunakan untuk membuat objek baru dengan sifat yang dikemaskini	Mengemaskini objek state bersarang
Callback Form of setState	setState(prevState => ...)	Apabila state baru bergantung pada state sebelumnya

Ingat, menguasai pengurusan state adalah kunci untuk menjadi seorang ninja React! ? Ia mungkin kelihatan mencabar pada permulaan, tetapi dengan latihan, anda akan mendapati ia menjadi tabiat. Terus coding, terus mencuba, dan terutamanya, bersenang-senang dengannya!

Dalam tahun-tahun pengajaran saya, saya mendapati bahawa cara terbaik untuk belajar adalah dengan melakukan. Jadi, saya menggalakkan anda untuk mengambil contoh ini, ubah mereka, pecahkan mereka, dan rebuild mereka. Itu adalah cara anda akan benar-benar memahami kuasa pengurusan state React.

Selamat coding, dan biar state bersama anda! ?

Credits: Image by storyset