Đây là phần đầu tiên của loạt bài khám phá React Hooks một cách sâu sắc. Trong bài viết này, chúng ta sẽ tìm hiểu hai hooks cơ bản nhất: useState và useEffect.
Hook useState cho phép bạn thêm state vào các functional components:
TypeScriptBạn thấy thế nào?
Đăng nhập để phản hồi.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Số đếm: {count}</p>
<button onClick={() => setCount(count + 1)}>Tăng</button>
</div>
);
}Hook useEffect cho phép bạn thực hiện side effects trong functional components:
TypeScriptimport { useEffect, useState } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]); // Dependency array
if (!user) return <div>Đang tải...</div>;
return <div>{user.name}</div>;
}[]: Chạy một lần khi mountTrong Phần 2, chúng ta sẽ khám phá useContext, useReducer và custom hooks. Hãy đón xem!
Phát triển Web
Hiểu các nguyên tắc cơ bản của React Hooks, bắt đầu với useState và useEffect