Nội dung chính
React Hooks:
Hướng Dẫn Toàn Diện
Giới Thiệu
React Hooks đã cách mạng hóa cách chúng ta viết các component trong React.
Chúng 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 phải viết class.
Hook useState
Hook useState
cho phép bạn thêm state vào các functional component:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Bạn đã click {count} lần</p>
<button onClick={() => setCount(count + 1)}>
Click vào tôi
</button>
</div>
);
}
Hook useEffect
Hook useEffect
cho phép bạn thực hiện các side effect trong functional component:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Bạn đã click ${count} lần`;
});
return (
<div>
<p>Bạn đã click {count} lần</p>
<button onClick={() => setCount(count + 1)}>
Click vào tôi
</button>
</div>
);
}
Kết Luận
React Hooks cung cấp API trực tiếp hơn cho các khái niệm React mà bạn đã biết.
Chúng giúp code của bạn dễ đọc và dễ kiểm thử hơn.