ReactJS - Sử dụng useState: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn, những nhà phát triển React tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này vào thế giới của React hooks, cụ thể là hook useState. Là người đã dạy lập trình trong nhiều năm, tôi có thể nói rằng việc hiểu quản lý trạng thái giống như học骑自行车 - ban đầu có thể trông不稳定, nhưng một khi bạn đã quen thuộc, bạn sẽ dễ dàng vượt qua các dự án React của mình!

useState là gì và tại sao chúng ta cần nó?

Trước khi chúng ta đi sâu vào chi tiết, hãy nói về lý do chúng ta cần useState đầu tiên. Hãy tưởng tượng bạn đang xây dựng một ứng dụng đếm đơn giản. Bạn muốn hiển thị một số và có các nút để tăng hoặc giảm nó. Bạn sẽ theo dõi giá trị hiện tại như thế nào? Đó là nơi useState ra vào!

useState là một hook của React cho phép chúng ta thêm trạng thái vào các thành phần hàm. Nó giống như cấp cho thành phần của bạn một bộ nhớ để nhớ các thứ giữa các lần render.

Tính năng của useState

Hãy phân tích các tính năng chính của useState:

Tính năng	Mô tả
Thêm trạng thái vào các thành phần hàm	useState cho phép chúng ta sử dụng trạng thái trong các thành phần hàm, điều này trước đây chỉ có thể thực hiện trong các thành phần lớp.
Trả về một mảng	useState trả về một mảng với hai phần tử: giá trị trạng thái hiện tại và một hàm để cập nhật nó.
Có thể giữ bất kỳ loại giá trị nào	Trạng thái có thể là số, chuỗi, boolean, đối tượng, mảng hoặc bất kỳ loại JavaScript nào khác.
Kích hoạt re-render	Khi trạng thái được cập nhật, nó gây ra việc thành phần re-render, phản ánh trạng thái mới.

Bây giờ chúng ta đã biết useState có thể làm gì, hãy nhìn nó trong hành động!

Áp dụng hook State

Hãy bắt đầu với một ví dụ đơn giản - ứng dụng đếm của chúng ta. Dưới đây là cách chúng ta có thể triển khai nó bằng useState:

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 tôi
</button>
</div>
);
}

Hãy phân tích điều này:

1. Chúng ta import useState từ React.
2. Trong thành phần của chúng ta, chúng ta gọi useState(0). Điều này tạo ra một biến trạng thái gọi là count với giá trị ban đầu là 0.
3. useState trả về một mảng, chúng ta phân tách nó thành count (giá trị trạng thái hiện tại) và setCount (một hàm để cập nhật trạng thái).
4. Trong JSX của chúng ta, chúng ta hiển thị giá trị hiện tại của count và tạo một nút mà khi nhấp vào, sẽ gọi setCount để tăng count.

Mỗi khi nút được nhấp, setCount được gọi, cập nhật trạng thái và gây ra việc re-render của thành phần của chúng ta với giá trị count mới.

Nhiều biến trạng thái

Một trong những điều tuyệt vời về useState là bạn có thể sử dụng nó nhiều lần trong một thành phần duy nhất. Hãy mở rộng ứng dụng đếm của chúng ta để bao gồm một tên:

function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Nhập tên của bạn"
/>
<p>{name ? `${name}'s count` : 'Count'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
Tăng
</button>
</div>
);
}

Ở đây, chúng ta sử dụng useState hai lần - một lần cho count và một lần cho đầu vào tên. Mỗi biến trạng thái hoàn toàn độc lập, cho phép chúng ta quản lý dễ dàng nhiều piece của trạng thái.

Sử dụng đối tượng làm trạng thái

Trong khi việc sử dụng nhiều useState hoạt động tuyệt vời cho các piece của trạng thái độc lập, đôi khi việc nhóm các piece trạng thái liên quan lại với nhau trong một đối tượng tiện lợi hơn. Hãy xem chúng ta có thể làm như thế nào:

function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};

return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="Tên"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="Tuổi"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="Sở thích"
/>
<p>
{user.name} là {user.age} tuổi và yêu thích {user.hobby}.
</p>
</div>
);
}

Trong ví dụ này, chúng ta sử dụng một useState duy nhất để quản lý một đối tượng với nhiều thuộc tính. Hàm handleChange 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 trước đó, sau đó cập nhật thuộc tính cụ thể đã thay đổi.

Phương pháp này có thể rất hữu ích khi xử lý các form hoặc bất kỳ tình huống nào bạn có nhiều piece trạng thái liên quan.

Lời cảnh báo

Khi sử dụng đối tượng (hoặc mảng) làm trạng thái, hãy luôn nhớ tạo một đối tượng mới khi cập nhật trạng thái, thay vì sửa đổi đối tượng hiện tại. React sử dụng sự bình đẳng tham chiếu để xác định xem trạng thái đã thay đổi hay chưa, vì vậy việc sửa đổi trực tiếp các thuộc tính của một đối tượng sẽ không gây ra re-render.

Kết luận

Và đó là tất cả, các bạn! Chúng ta đã đi qua vùng đất của useState, từ các ứng dụng đếm đơn giản đến quản lý trạng thái phức tạp đối tượng. Nhớ rằng, giống như bất kỳ kỹ năng mới nào, việc thành thạo useState cần phải luyện tập. Đừng nản lòng nếu nó không ngay lập tức hiểu được - tiếp tục thử nghiệm, và sớm bạn sẽ quản lý trạng thái như một chuyên gia!

Trước khi chúng ta tạm biệt, hãy tóm tắt nhanh những gì chúng ta đã học:

1. useState cho phép chúng ta thêm trạng thái vào các thành phần hàm.
2. Nó trả về một mảng với giá trị trạng thái hiện tại và một hàm để cập nhật nó.
3. Chúng ta có thể sử dụng useState nhiều lần cho các piece trạng thái độc lập.
4. Đối tượng có thể được sử dụng làm trạng thái để nhóm các piece dữ liệu liên quan.
5. Luôn tạo mới đối tượng khi cập nhật trạng thái.

Bây giờ, hãy tiến lên và tạo ra các ứng dụng React có trạng thái tuyệt vời! And remember, in the world of React, the only constant is change (of state, that is)!

Credits: Image by storyset