ReactJS - Pengurusan Keadaan API

Hai sana, pemrogram muda! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia pengurusan keadaan ReactJS. Jangan bimbang jika anda baru dalam bidang pemrograman - saya akan menjadi panduannya yang ramah, dan kita akan mengambil langkah demi langkah. Pada akhir panduan ini, anda akan mendapat pengetahuan yang kukuh tentang bagaimana React menguruskan keadaan, yang penting untuk membina aplikasi web dinamik dan interaktif.

apa itu Keadaan dalam React?

Sebelum kita masuk ke detil, mari kita memahami apa maksud "keadaan" dalam React. Bayangkan anda membina aplikasi pengira yang mudah. Kiraan semasa adalah apa yang kita sebut "keadaan" aplikasi anda. Ia seperti ingatan aplikasi anda - ia tahu nombor mana yang sedang dipaparkan.

Ini adalah contoh ringkas komponen pengira:

import React, { Component } from 'react';

class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return (
<div>
<p>Kiraan: {this.state.count}</p>
</div>
);
}
}

Dalam contoh ini, count adalah keadaan kita. Ia diinisialisasi ke 0 dalam pengkhususan.

Memperbaharui Keadaan: Metod setState()

Sekarang, mari kita belajar bagaimana untuk memperbaharui keadaan kita. React menyediakan metod khas yang dipanggil setState() untuk tujuan ini. Ia seperti memberitahu React, "Hey, saya mahu mengubah sesuatu dalam ingatan aplikasi ini!"

Ini adalah bagaimana kita boleh menggunakan setState() untuk meningkatkan pengiraan kita:

class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}

render() {
return (
<div>
<p>Kiraan: {this.state.count}</p>
<button onClick={this.incrementCount}>Tingkatkan</button>
</div>
);
}
}

Dalam contoh ini, kita telah menambahkan metod incrementCount yang menggunakan setState() untuk meningkatkan kiraan sebanyak 1. Kita juga menambahkan butang yang memanggil metod ini apabila diklik.

setState() dengan Fungsi

Sekarang, mari kita lihat di mana hal ini menjadi menarik. kadang-kadang, anda mungkin mahu memperbaharui keadaan berdasarkan keadaan sebelumnya. Dalam kes seperti ini, menggunakan setState() dengan objek (seperti yang kita lakukan di atas) mungkin tidak selalu berfungsi seperti yang dijangkakan kerana alam asinkronous React.

Ini adalah di mana setState() dengan fungsi datang untuk menyelamatkan! mari kita ubah metod incrementCount:

incrementCount = () => {
this.setState((prevState) => ({
count: prevState.count + 1
}));
}

Dalam versi ini, kita mempass fungsi kepada setState(). Fungsi ini menerima keadaan sebelumnya sebagai argumen dan mengembalikan objek yang mewakili keadaan baru. Pendekatan ini memastikan kita selalu bekerja dengan keadaan yang paling baru.

Ciri Khas API Pengurusan Keadaan React

API pengurusan keadaan React mempunyai beberapa ciri khas yang menjadikannya kuat dan fleksibel. Mari kita jelajahi beberapa daripadanya:

1. Pembaruan Sebahagian

Anda tidak perlu menyertakan semua properti keadaan saat memperbaharui. React akan menggabungkan objek yang anda sediakan ke keadaan sekarang.

class UserProfile extends Component {
constructor(props) {
super(props);
this.state = {
name: 'John Doe',
age: 30,
location: 'New York'
};
}

updateAge = () => {
this.setState({
age: 31
});
// Ini hanya memperbaharui umur, meninggalkan nama dan lokasi tidak berubah
}

render() {
return (
<div>
<p>Nama: {this.state.name}</p>
<p>Umur: {this.state.age}</p>
<p>Lokasi: {this.state.location}</p>
<button onClick={this.updateAge}>Hari Ulang Tahun Selamat!</button>
</div>
);
}
}

2. Pembaruan Keadaan Digerakkan

Saat anda memanggil setState(), React menggabungkan objek yang anda sediakan ke keadaan saat ini. Ini berarti anda dapat memanggil setState() beberapa kali di tempat yang berbeda, dan React akan menunggu semua perubahan dan menerapkan mereka dalam pembaruan tunggal.

3. Pembaruan Keadaan Mungkin Asinkron

React mungkin memungkinkan beberapa pemanggilan setState() untuk digabungkan menjadi pembaruan tunggal untuk alasan kinerja. Ini berarti anda tidak boleh mengandalkan this.state untuk merefleksikan nilai baru segera setelah memanggil setState().

Berikut adalah tabel yang menggabungkan metode dan fitur kunci API Pengurusan Keadaan React:

Metode/Fitur	Deskripsi	Contoh
setState()	Memperbarui keadaan komponen	this.setState({ count: 5 })
setState() dengan fungsi	Memperbarui keadaan berdasarkan keadaan sebelumnya	this.setState(prevState => ({ count: prevState.count + 1 }))
Pembaruan sebahagian	Hanya properti yang ditentukan diperbarui	this.setState({ age: 31 })
Pembaruan digabungkan	Beberapa pemanggilan setState() digabungkan	this.setState({ name: 'Jane' }); this.setState({ age: 25 });
Pembaruan asinkron	Pembaruan keadaan mungkin tidak segera	Gunakan callbacks atau componentDidUpdate() untuk bekerja dengan keadaan yang diperbarui

Ingat, menguasai pengurusan keadaan adalah seperti belajar jongkok - itu memerlukan latihan, tetapi sekali anda menguasainya, anda dapat melakukan hal yang menakjubkan! Terus mencoba konsep ini, dan segera anda akan dapat membina aplikasi React yang kompleks dan interaktif dengan mudah.

Selamat coding, master masa depan React! ??‍??‍?

Credits: Image by storyset