ReactJS - Quản lý Trạng thái API

Xin chào các bạn lập trình viên đang phát triển! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới quản lý trạng thái trong ReactJS. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có được một sự hiểu biết vững chắc về cách React quản lý trạng thái, điều này rất quan trọng cho việc xây dựng các ứng dụng web động và tương tác.

Trạng thái là gì trong React?

Trước khi chúng ta đi vào chi tiết, hãy hiểu xem "trạng thái" có nghĩa là gì trong React. Hãy tưởng tượng bạn đang xây dựng một ứng dụng đếm đơn giản. Số đếm hiện tại chính là "trạng thái" của ứng dụng bạn. Nó giống như bộ nhớ của ứng dụng - nó biết số nào đang được hiển thị.

Dưới đây là một ví dụ đơn giản của thành phần đếm:

import React, { Component } from 'react';

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

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

Trong ví dụ này, count là trạng thái của chúng ta. Nó được khởi tạo là 0 trong constructor.

Cập nhật Trạng thái: Phương thức setState()

Bây giờ, hãy học cách cập nhật trạng thái của chúng ta. React cung cấp một phương thức đặc biệt gọi là setState() để thực hiện điều này. Nó giống như nói với React, "Hey, tôi muốn thay đổi điều gì đó trong bộ nhớ của ứng dụng!"

Dưới đây là cách chúng ta có thể sử dụng setState() để tăng giá trị của bộ đếm:

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

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

render() {
return (
<div>
<p>Đếm: {this.state.count}</p>
<button onClick={this.incrementCount}>Tăng</button>
</div>
);
}
}

Trong ví dụ này, chúng ta đã thêm một phương thức incrementCount sử dụng setState() để tăng giá trị của count lên 1. Chúng ta cũng đã thêm một nút để gọi phương thức này khi được nhấp.

Sử dụng setState() với Hàm

Bây giờ, hãy xem điều thú vị sẽ xảy ra. Đôi khi, bạn có thể muốn cập nhật trạng thái dựa trên trạng thái trước đó. Trong trường hợp này, sử dụng setState() với một đối tượng (như chúng ta đã làm ở trên) có thể không luôn hoạt động như mong đợi do bản chất không đồng bộ của React.

Đây là nơi setState() với một hàm đến cứu trợ! Hãy thay đổi phương thức incrementCount của chúng ta:

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

Trong phiên bản này, chúng ta đang truyền một hàm cho setState(). Hàm này nhận trạng thái trước đó làm đối số và trả về một đối tượng đại diện cho trạng thái mới. Cách tiếp cận này đảm bảo rằng chúng ta luôn làm việc với trạng thái mới nhất.

Tính năng Đặc biệt của API Quản lý Trạng thái React

API quản lý trạng thái của React có một số tính năng đặc biệt làm cho nó mạnh mẽ và linh hoạt. Hãy khám phá một số trong số chúng:

1. Cập nhật Phần Thư

Bạn không cần phải bao gồm tất cả các thuộc tính trạng thái khi cập nhật. React sẽ trộn đối tượng bạn cung cấp vào trạng thái hiện tại.

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

updateAge = () => {
this.setState({
age: 31
});
// Điều này chỉ cập nhật tuổi, để tên và địa điểm không thay đổi
}

render() {
return (
<div>
<p>Tên: {this.state.name}</p>
<p>Tuổi: {this.state.age}</p>
<p>Địa điểm: {this.state.location}</p>
<button onClick={this.updateAge}>Chúc mừng sinh nhật!</button>
</div>
);
}
}

2. Cập nhật Trạng thái Được Trộn

Khi bạn gọi setState(), React trộn đối tượng bạn cung cấp vào trạng thái hiện tại. Điều này có nghĩa là bạn có thể gọi setState() nhiều lần ở các nơi khác nhau, và React sẽ排队 tất cả các thay đổi và áp dụng chúng trong một bản cập nhật duy nhất.

3. Cập nhật Trạng thái Có Thể Là Không Đồng Bộ

React có thể合并 nhiều cuộc gọi setState() thành một bản cập nhật duy nhất vì lý do hiệu suất. Điều này có nghĩa là bạn không nên dựa vào this.state để phản ánh giá trị mới ngay lập tức sau khi gọi setState().

Dưới đây là bảng tóm tắt các phương thức và tính năng chính của API Quản lý Trạng thái React:

Phương thức/Tính năng	Mô tả	Ví dụ
setState()	Cập nhật trạng thái của thành phần	this.setState({ count: 5 })
setState() với hàm	Cập nhật trạng thái dựa trên trạng thái trước đó	this.setState(prevState => ({ count: prevState.count + 1 }))
Cập nhật phần thư	Chỉ cập nhật các thuộc tính được chỉ định	this.setState({ age: 31 })
Cập nhật được trộn	Nhiều cuộc gọi setState() được trộn	this.setState({ name: 'Jane' }); this.setState({ age: 25 });
Cập nhật không đồng bộ	Cập nhật trạng thái có thể không ngay lập tức	Sử dụng callbacks hoặc componentDidUpdate() để làm việc với trạng thái đã được cập nhật

Nhớ rằng, việc thành thạo quản lý trạng thái giống như học cách chơi cào cào - nó đòi hỏi sự luyện tập, nhưng một khi bạn đã nắm vững, bạn có thể làm những điều kỳ diệu! Hãy tiếp tục thử nghiệm với các khái niệm này, và sớm bạn sẽ xây dựng các ứng dụng React phức tạp, tương tác một cách dễ dàng.

Chúc các bạn may mắn trong việc lập trình, những người master React tương lai! ??‍??‍?

Credits: Image by storyset