Móc phản ứng
Hook đã được thêm vào React trong phiên bản 16.8.
Hook 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 React khác. Vì lý do này, các thành phần lớp thường không còn cần thiết nữa.
Mặc dù Hook 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.
Móc là gì?
Hook cho phép chúng ta "nối" vào các tính năng của React như phương thức trạng thái và vòng đời.
Ví 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/client"; 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> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<FavoriteColor />);
Bạn phải import
Hook từ react
.
Ở đây chúng ta đang sử dụng useState
Hook để theo dõi trạng thái ứng dụng.
Trạng thái thường đề cập đến dữ liệu hoặc thuộc tính ứng dụng 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 ý: Hook 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ể xây dựng Móc 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 .