Hooks chủ yếu được sử dụng để cung cấp trạng thái, các phương thức vòng đời và tất cả các tính năng khác trong thành phần chức năng mà chúng ta thường nhận được trong một thành phần lớp. Nhưng cũng làm cho nó dễ dàng hơn để áp dụng.

Sử dụng ở đâu

Hooks chủ yếu được sử dụng trong các thành phần chức năng phản ứng. Bởi vì các thành phần chức năng là không trạng thái và các hook cung cấp cho chúng tôi cơ sở để sử dụng hầu hết các tính năng phản ứng trong đó.

Tại sao chúng tôi thích móc

Để hiểu điều này, trước tiên chúng ta nên hiểu lý do tại sao chúng ta sử dụng thành phần chức năng vì cuối cùng chúng được sử dụng bên trong các thành phần chức năng.

lợi ích của việc sử dụng thành phần chức năng

• Nó tránh sử dụng thừa kế không cần thiết mà chúng ta thường sử dụng trong thành phần lớp.
• do đó không cần khai báo hàm tạo hoặc gọi super.
• Không cần ràng buộc các chức năng với ngữ cảnh này của thành phần.

useState

Chủ yếu được sử dụng để tạo biến trạng thái và cũng cung cấp một chức năng để sửa đổi trạng thái. Nó có thể được sử dụng bất kỳ số lần nào.

const [name, setName] = useState (“Rajiv”)

useEffect

Hook này có thể được sử dụng cho 3 vòng đời - componentDidMount, componentDidUpdate và componentWillUnmount. Nó có thể được sử dụng nhiều lần trong một thành phần.

useEffect (() => {console.log ('cái này sẽ hoạt động như componentDidMount');}, [])

useEffect (() => {console.log ('cái này sẽ hoạt động dưới dạng componentDidUpdate');}, [name])

useEffect (() => {

return () => {console.log ('cái này sẽ hoạt động dưới dạng componentWillUnmount'); }

}, [])

Móc cho redux

Tương tự như react, thư viện react-redux cũng cung cấp một số hook để dễ dàng triển khai redux. Hãy xem chúng -

useSelector

Nó được sử dụng để cung cấp kho lưu trữ redux để phản ứng các thành phần chức năng. Trước đó, chúng tôi đã sử dụng mapStateToProps với phương thức kết nối để lấy trạng thái từ redux.

const postsList = useSelector (store => store.posts.postsData)

Như bạn có thể thấy trong ví dụ trên, useSelector chấp nhận một lệnh gọi lại chứa lưu trữ dưới dạng tham số và chúng ta có thể chọn dữ liệu mong muốn để trả về từ nó. Ở đây chúng tôi đã lấy postData từ store dưới dạng danh sách postsList sau đó chúng tôi có thể sử dụng nó để hiển thị bằng bản đồ.

useDispatch

Nó được sử dụng để gửi một hành động trực tiếp từ thành phần phản ứng. Trước đó, chúng ta cần sử dụng công văn từ connect hoặc mapDispatchToProps với sự trợ giúp của bindActionCreators .

const Dispatch = useDispatch ();

Như bạn có thể thấy trong ví dụ trên, useDispatch trả về một hàm điều phối. Ở đây chúng tôi đã gửi hành động addPost khi nhấp vào nút Thêm.

phần kết luận

hooks làm cho việc phát triển trở nên dễ dàng và đơn giản hơn với việc bổ sung rất nhiều tính năng tuyệt vời trong đó và cung cấp một tùy chọn tốt hơn cho thành phần lớp. Nó làm giảm độ phức tạp cũng như tránh việc sử dụng gây nhầm lẫn từ khóa này.