ReactJS - Chu kỳ sống của Component bằng React Hooks

Xin chào các bạn đang theo đuổi lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của ReactJS, tập trung vào chu kỳ sống của component bằng React Hooks. Đừng lo lắng nếu bạn mới bắt đầu lập trình - tôi sẽ hướng dẫn bạn từng bước với những giải thích rõ ràng và nhiều ví dụ. Hãy cùng nhau khám phá nhé!

Giới thiệu về React Hooks

Trước khi chúng ta đi sâu vào chu kỳ sống của component, hãy hiểu React Hooks là gì. Hãy tưởng tượng Hooks như những công cụ đặc biệt cho phép bạn sử dụng state và các tính năng khác của React mà không cần viết một lớp. Chúng giống như những cây phép cho component hàm của bạn có siêu năng lực!

Tại sao lại sử dụng Hooks?

Trong những ngày xưa (đúng hơn là không quá cũ, nhưng trong thế giới công nghệ), chúng ta phải sử dụng các component lớp để quản lý state và các hiệu ứng phụ. Nhưng các lớp có thể rất phức tạp, đặc biệt là đối với người mới bắt đầu. Hooks đơn giản hóa quy trình này, làm cho mã của chúng ta sạch sẽ và dễ tái sử dụng hơn.

Chu kỳ sống của Component

Giống như chúng ta, các component React có một chu kỳ sống. Chúng được sinh ra (mounted), chúng lớn lên và thay đổi (update), và cuối cùng, chúng không còn cần thiết nữa (unmounted). Hiểu rõ chu kỳ sống này là rất quan trọng để tạo ra các ứng dụng React hiệu quả.

Ba giai đoạn của chu kỳ sống của một Component

1. Mounting: Component đang được thêm vào DOM.
2. Updating: Component đang được re-render do sự thay đổi của props hoặc state.
3. Unmounting: Component đang được loại bỏ khỏi DOM.

Bây giờ, hãy xem cách chúng ta có thể quản lý các giai đoạn này bằng Hooks!

useState: Quản lý State của Component

Hook useState là công cụ hàng đầu của bạn để thêm state vào các component hàm. Hãy xem một ví dụ:

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, useState(0) khởi tạo một biến state count với giá trị là 0. Hàm setCount cho phép chúng ta cập nhật state. Mỗi khi nút được nhấp, setCount(count + 1) được gọi, tăng giá trị của count và gây ra việc component re-render.

useEffect: Xử lý Hiệu ứng Phụ

Hook useEffect giống như một cây đa năng cho việc quản lý hiệu ứng phụ trong component của bạn. Nó kết hợp chức năng của nhiều phương thức lifecycle từ các component lớp.

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
const [data, setData] = useState(null);

useEffect(() => {
// Hiệu ứng này chạy sau mỗi lần render
console.log('Component được render');

// Simulating an API call
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
};

fetchData();

// Hàm làm sạch
return () => {
console.log('Component sẽ unmount hoặc re-render');
};
}, []); // Mảng phụ thuộc trống có nghĩa là hiệu ứng này chỉ chạy một lần khi component được mount

return (
<div>
{data ? <p>{data}</p> : <p>Đang tải...</p>}
</div>
);
}

Ví dụ này minh họa một số khái niệm quan trọng:

1. Hiệu ứng chạy sau khi component render.
2. Chúng ta đang simulating một yêu cầu API để lấy dữ liệu.
3. Hàm làm sạch (returned by the effect) chạy trước khi component unmount hoặc trước khi hiệu ứng chạy lại.
4. Mảng phụ thuộc trống [] có nghĩa là hiệu ứng này chỉ chạy một lần khi component được mount.

Custom Hooks: Tạo Logic Tái Sử Dụng

Một trong những tính năng mạnh mẽ nhất của Hooks là khả năng tạo ra các Hook tùy chỉnh. Những Hook này cho phép bạn tách logic của component ra thành các hàm tái sử dụng. Hãy tạo một Hook tùy chỉnh để xử lý các input của form:

import { useState } from 'react';

function useInput(initialValue) {
const [value, setValue] = useState(initialValue);

const handleChange = (event) => {
setValue(event.target.value);
};

return [value, handleChange];
}

// Sử dụng Hook tùy chỉnh
function LoginForm() {
const [username, handleUsernameChange] = useInput('');
const [password, handlePasswordChange] = useInput('');

const handleSubmit = (event) => {
event.preventDefault();
console.log(`Đăng nhập với ${username} và ${password}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={username}
onChange={handleUsernameChange}
placeholder="Tên đăng nhập"
/>
<input
type="password"
value={password}
onChange={handlePasswordChange}
placeholder="Mật khẩu"
/>
<button type="submit">Đăng nhập</button>
</form>
);
}

Hook tùy chỉnh useInput này bao gồm logic để xử lý các input của form, làm cho component LoginForm của chúng ta sạch sẽ và dễ tái sử dụng hơn.

Thuộc tính children của React (Containment)

Thuộc tính children trong React cho phép bạn truyền các component như dữ liệu vào các component khác, cung cấp một cách để tạo ra các component wrapper. Khái niệm này thường được gọi là "containment".

function Panel({ children, title }) {
return (
<div className="panel">
<h2>{title}</h2>
{children}
</div>
);
}

function App() {
return (
<Panel title="Chào mừng">
<p>Đây là nội dung của panel.</p>
<button>Nhấp vào tôi!</button>
</Panel>
);
}

Trong ví dụ này, component Panel có thể bao gồm bất kỳ nội dung nào được truyền vào dưới dạng children, làm cho nó rất linh hoạt và dễ tái sử dụng.

Kết luận

Chúng ta đã bao quát rất nhiều nội dung hôm nay! Từ việc hiểu cơ bản về React Hooks đến việc khám phá chu kỳ sống của component và thậm chí là tạo ra các Hook tùy chỉnh. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngần ngại thử nghiệm các khái niệm này trong các dự án của riêng bạn.

Dưới đây là bảng tham khảo nhanh các Hook chúng ta đã thảo luận:

Hook	Mục đích	Ví dụ
useState	Quản lý state của component	const [count, setCount] = useState(0);
useEffect	Xử lý hiệu ứng phụ	useEffect(() => { /* effect */ }, []);
Custom Hooks	Tạo logic tái sử dụng	const [value, handleChange] = useInput('');

Chúc các bạn lập trình vui vẻ, và may mắn với Hooks!

Credits: Image by storyset