Quản lý Trạng thái bằng React Hooks

Xin chào các bạnfuture nhà phát triển React! 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 bằng React Hooks. Là người dạy khoa học máy tính ở khu phố của bạn, tôi rất vui mừng được hướng dẫn các bạn trong chuyến phiêu lưu này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ cùng nhau học từng bước, và trước khi bạn nhận ra, bạn sẽ quản lý trạng thái như một chuyên gia!

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

Trước khi chúng ta đi vào chi tiết, hãy hiểu thế nào là "trạng thái" trong React. Hãy tưởng tượng bạn đang xây dựng một lâu đài cát. Ş 현재 hình dạng và kích thước của lâu đài cát là "trạng thái" của nó. Khi bạn thêm hoặc bớt cát, trạng thái của lâu đài cát sẽ thay đổi. Tương tự, trong React, trạng thái đại diện cho tình trạng hiện tại của một thành phần - dữ liệu, ngoại hình hoặc hành vi của nó ở bất kỳ thời điểm nào.

Giới thiệu về React Hooks

Bây giờ, hãy nói về React Hooks. Hãy tưởng tượng hooks là những công cụ ma thuật giúp các thành phần của bạn có siêu năng lực. Chúng cho phép các thành phần hàm có trạng thái và các tính năng khác của React mà không cần viết một lớp. Hook mà chúng ta sẽ tập trung vào hôm nay là useState.

Tạo một Thành phần có Trạng thái

Hãy bắt đầu bằng cách tạo một thành phần đơn giản có trạng thái. Chúng ta sẽ xây dựng một bộ đếm tăng khi bạn nhấp vào một nút.

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>
);
}

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

1. Chúng ta import useState từ React.
2. Trong hàm Counter, chúng ta gọi useState(0). Điều này tạo ra một biến trạng thái count được khởi tạo là 0, và một hàm setCount để cập nhật nó.
3. Chúng ta hiển thị giá trị hiện tại của count trong một đoạn văn.
4. Khi nút được nhấp, chúng ta gọi setCount(count + 1) để tăng giá trị của count.

Mỗi khi bạn nhấp vào nút, React sẽ重新渲染 thành phần với giá trị count đã cập nhật. Điều này giống như魔法, phải không?

Giới thiệu Trạng thái trong Ứng dụng Quản lý Chi Tiêu

Bây giờ, khi chúng ta đã có chút kinh nghiệm, hãy đi sâu hơn với một ví dụ thực tế hơn - ứng dụng quản lý chi tiêu. Chúng ta sẽ tạo một thành phần cho phép người dùng thêm chi tiêu.

import React, { useState } from 'react';

function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');

const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};

return (
<div>
<h2>Quản lý Chi Tiêu</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="Tên chi tiêu"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="Số tiền"
/>
<button onClick={addExpense}>Thêm Chi Tiêu</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}

Wow, có vẻ như có rất nhiều thứ để hấp thụ! Hãy phân tích nó:

1. Chúng ta có ba biến trạng thái:

• expenses: Một mảng để lưu trữ tất cả các chi tiêu
• newExpense: Một chuỗi để tên của chi tiêu mới
• newAmount: Một chuỗi cho số tiền của chi tiêu mới

2. Hàm addExpense:

• Kiểm tra nếu cả newExpense và newAmount đều không rỗng
• Thêm một đối tượng chi tiêu mới vào mảng expenses
• Xóa trắng các trường nhập liệu

3. Trong JSX:

• Chúng ta có hai trường nhập liệu cho tên chi tiêu và số tiền
• Một nút để thêm chi tiêu
• Một danh sách hiển thị tất cả các chi tiêu

Nhớ lại khi tôi đề cập đến lâu đài cát trước đó? Đây giống như một sân cát nơi bạn có thể thêm mới các lâu đài (chi tiêu) bất cứ lúc nào bạn muốn. Mỗi lâu đài có một tên và kích thước (số tiền), và bạn có thể thấy tất cả các lâu đài của mình được liệt kê ở dưới.

Bảng Phương thức

Dưới đây là bảng phương thức chúng ta đã sử dụng:

Phương thức	Mô tả
useState	Tạo ra một biến trạng thái và một hàm để cập nhật nó
setExpenses	Cập nhật mảng expenses
setNewExpense	Cập nhật chuỗi newExpense
setNewAmount	Cập nhật chuỗi newAmount
map	Tạo ra một mảng mới bằng cách gọi một hàm trên mỗi phần tử của mảng

Kết luận

Chúc mừng! Bạn đã chính thức bước vào thế giới quản lý trạng thái với React Hooks. Chúng ta đã học cách tạo thành phần có trạng thái, cập nhật trạng thái và thậm chí xây dựng một ứng dụng quản lý chi tiêu mini.

Nhớ lại, học React giống như xây dựng lâu đài cát - bắt đầu từ nhỏ, thử nghiệm, và đừng害怕 knock nó xuống và bắt đầu lại. Với sự luyện tập, bạn sẽ nhanh chóng xây dựng các ứng dụng phức tạp và đẹp mắt.

Tiếp tục lập mã, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Đến gặp lại các bạn vào lần sau, đây là người dạy khoa học máy tính của bạn signing off. Chúc các bạn vui vẻ với React!

Credits: Image by storyset