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

Xin chào các siêu sao React tương lai! ? Hôm nay, chúng ta sẽ khám phá một trong những khái niệm quan trọng nhất trong React: Quản lý Trạng thái (State Management). Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ dẫn dắt bạn từng bước trong hành trình này. Nào, hãy lấy ly đồ uống yêu thích của bạn và bắt đầu nhé!

Trạng thái là gì?

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà bằng bài. Mỗi lá bài đại diện cho một mảnh thông tin trong ứng dụng của bạn. Bây giờ, điều gì sẽ xảy ra khi bạn cần thay đổi vị trí của một lá bài? Đúng rồi, nó sẽ ảnh hưởng đến toàn bộ cấu trúc! Trong React, chúng ta gọi thông tin động, có thể thay đổi này là "trạng thái".

Trạng thái giống như bộ nhớ của thành phần React của bạn. Nó lưu trữ dữ liệu có thể thay đổi theo thời gian, và khi nó thay đổi, React sẽ cập nhật giao diện người dùng của bạn một cách hiệu quả để phản ánh những thay đổi đó.

Hãy cùng nhìn vào một ví dụ đơn giản:

import React, { useState } from 'react';

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

return (
<div>
<p>Bạn đã nhấp {count} lần</p>
<button onClick={() => setCount(count + 1)}>
Nhấp vào tôi
</button>
</div>
);
}

Trong ví dụ này, count là trạng thái của chúng ta. Nó bắt đầu từ 0 và tăng lên mỗi khi chúng ta nhấp vào nút. Phép thuật ở đây là React tự động re-render thành phần của chúng ta mỗi khi count thay đổi, cập nhật những gì chúng ta thấy trên màn hình.

Định nghĩa Trạng thái

Bây giờ chúng ta đã hiểu trạng thái là gì, hãy học cách định nghĩa nó trong các thành phần React của chúng ta. Trong React hiện đại, chúng ta sử dụng hook useState để định nghĩa trạng thái. Đừng lo lắng nếu từ "hook" nghe có vẻ đáng sợ - nó chỉ là một hàm đặc biệt cho phép chúng ta thêm các tính năng React vào thành phần của mình.

Dưới đây là cú pháp cơ bản:

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

Hãy phân tích nó:

• stateName: Đây là tên của biến trạng thái của bạn.
• setStateName: Đây là một hàm cho phép bạn cập nhật trạng thái.
• initialValue: Đây là giá trị bắt đầu của trạng thái của bạn.

Hãy nhìn vào điều này trong hành động với một ví dụ phức tạp hơn:

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="Nhập tên của bạn"
/>
<input
type="number"
value={age}
onChange={(e) => setAge(parseInt(e.target.value))}
placeholder="Nhập tuổi của bạn"
/>
<label>
<input
type="checkbox"
checked={isStudent}
onChange={(e) => setIsStudent(e.target.checked)}
/>
Bạn có phải là sinh viên không?
</label>
<p>Tên: {name}</p>
<p>Tuổi: {age}</p>
<p>Sinh viên: {isStudent ? 'Yes' : 'No'}</p>
</div>
);
}

Trong ví dụ này, chúng ta đã định nghĩa ba biến trạng thái: name, age, và isStudent. Mỗi biến sử dụng một loại dữ liệu khác nhau (chuỗi, số, và boolean), cho thấy trạng thái có thể linh hoạt như thế nào.

Tạo một đối tượng Trạng thái

Đôi khi, bạn có thể muốn nhóm các biến trạng thái liên quan lại với nhau. Trong những trường hợp như vậy, bạn có thể tạo một đối tượng trạng thái. Điều này đặc biệt hữu ích khi bạn có nhiều biến trạng thái hoặc khi chúng tạo thành một nhóm logic.

Dưới đây là cách bạn có thể làm điều đó:

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="Tên Sách"
/>
<input
type="text"
name="author"
value={book.author}
onChange={handleInputChange}
placeholder="Tên Tác giả"
/>
<input
type="number"
name="year"
value={book.year}
onChange={handleInputChange}
placeholder="Năm Xuất bản"
/>
<label>
<input
type="checkbox"
name="isPublished"
checked={book.isPublished}
onChange={handleInputChange}
/>
Đã Xuất bản?
</label>
<p>Chi tiết Sách: {JSON.stringify(book)}</p>
</form>
);
}

Trong ví dụ này, chúng ta đã tạo một đối tượng trạng thái book chứa tất cả thông tin về một cuốn sách. Hàm handleInputChange sử dụng toán tử spread (...) để tạo một đối tượng mới với tất cả các thuộc tính hiện có của book, sau đó cập nhật thuộc tính cụ thể đã thay đổi.

Phương pháp này đặc biệt hữu ích khi bạn đang làm việc với các biểu mẫu hoặc bất kỳ tình huống nào bạn có nhiều mảnh thông tin liên quan.

Phương pháp Quản lý Trạng thái

Dưới đây là bảng tóm tắt các phương pháp chính chúng ta đã thảo luận cho việc quản lý trạng thái trong React:

Phương pháp	Mô tả	Trường hợp sử dụng
useState	Hook để thêm trạng thái vào các thành phần hàm	Quản lý trạng thái đơn giản
Đối tượng Trạng thái	Sử dụng một đối tượng để nhóm các biến trạng thái liên quan	Biểu mẫu phức tạp, dữ liệu liên quan
Toán tử Spread	Sử dụng để tạo một đối tượng mới với các thuộc tính đã được cập nhật	Cập nhật đối tượng trạng thái嵌套
Tham chiếu回调 của setState	setState(prevState => ...)	Khi trạng thái mới phụ thuộc vào trạng thái trước

Nhớ rằng, việc thành thạo quản lý trạng thái là chìa khóa để trở thành một ninja React! ? Nó có thể看起来 phức tạp ban đầu, nhưng với sự luyện tập, bạn sẽ thấy nó trở thành bản năng thứ hai. Hãy tiếp tục lập mã, tiếp tục thử nghiệm, và quan trọng nhất, hãy vui vẻ với nó!

Trong những năm dạy học của tôi, tôi đã phát hiện ra rằng cách tốt nhất để học là làm. Vì vậy, tôi khuyến khích bạn lấy các ví dụ này, chỉnh sửa chúng, phá vỡ chúng, và xây dựng lại chúng. Đó là cách bạn thực sự sẽ hiểu sức mạnh của quản lý trạng thái trong React.

Chúc bạn vui vẻ lập mã, và may trạng thái luôn ở bên bạn! ?

Credits: Image by storyset