React Hooks
Hooks đã được thêm vào React trong phiên bản 16.8.
Hooks cho phép các thành phần chức năng có quyền truy cập vào trạng thái và các tính năng khác của React. Do đó, các thành phần lớp nói chung không còn cần thiết nữa.
Mặc dù Hooks thường thay thế các thành phần lớp, nhưng không có kế hoạch loại bỏ các lớp khỏi React.
Hook là gì?
Hooks cho phép chúng ta "móc" vào các tính năng của React như các phương thức trạng thái và vòng đời.
Thí dụ:
Đây là một ví dụ về Hook. Đừng lo lắng nếu nó không có ý nghĩa. Chúng ta sẽ đi vào chi tiết hơn trong phần tiếp theo .
import React, { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
<button
type="button"
onClick={() => setColor("red")}
>Red</button>
<button
type="button"
onClick={() => setColor("pink")}
>Pink</button>
<button
type="button"
onClick={() => setColor("green")}
>Green</button>
</>
);
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Bạn phải importHooks từ react.
Ở đây chúng tôi đang sử dụng useStateHook để theo dõi trạng thái ứng dụng.
State thường đề cập đến dữ liệu ứng dụng hoặc thuộc tính cần được theo dõi.
Quy tắc móc
Có 3 quy tắc cho hook:
- Hook chỉ có thể được gọi bên trong các thành phần hàm React.
- Hook chỉ có thể được gọi ở cấp cao nhất của một thành phần.
- Móc không thể có điều kiện
Lưu ý: Hooks sẽ không hoạt động trong các thành phần của lớp React.
Móc tùy chỉnh
Nếu bạn có logic trạng thái cần được sử dụng lại trong một số thành phần, bạn có thể tạo các Hook tùy chỉnh của riêng mình.
Chúng ta sẽ đi vào chi tiết hơn trong phần Custom Hooks .