ReactJS nâng cao bài 1: Tạo một hooks đầu tiên (useHover)

Tram Ho

Xin chào các bạn!

Trong series này, mình sẽ bắt đầu chia sẻ những kiến thức có thể tạm gọi là nâng cao về Reactjs, vì nó không dành cho những người mới học Reactjs. Mình sẽ cố gắng giải thích nhiều nhất có thể ý nghĩa của từng đoạn code được viết ra. Mình hi vọng những chia sẻ của mình sẽ hữu ích với các bạn đang sử dụng Reactjs. Nếu bạn phát hiện trong bài viết của mình có lỗi, hãy comment phía dưới giúp mình nhé! Xin cảm ơn!

Bắt đầu thôi nào!

Đặt vấn đề: Trong các component của React, chúng ta thường sử dụng rất thường xuyên việc xử lý các sự kiện Hover chuột lên component. Theo cách thông thường chúng ta sẽ viết đại khái như này:

Sẽ không có vấn đề gì cả khi ứng dụng của bạn chỉ có ít component phải sử dụng các sự kiện Hover chuột. Nhưng nếu Ứng dụng của bạn có quá nhiều chỗ phải dùng đến nó thì sao? Chẳng lẽ cứ trong mỗi component lại phải viết lại đống này sao?
Câu trả lời rõ ràng là không, bằng cách này hay cách khác, nhưng chắc chắn bạn sẽ phải đóng gói chúng lại để tái sử dụng. Có thể nghĩ đến Higer Order Component cũng là một giải pháp.

Ở đây, mình sẽ cung cấp một giải pháp xử lý nó để tái sử dụng một cách đơn giản nhất. đó là: Tạo ra một hooks để xử lý các sự kiện Hover chuột.
Kết quả sẽ được một hàm useHover() và chúng ta có thể sử dụng nó dễ dàng như sau:

Live demo:

Xem live Demo trên Codesanbox

Thực sự đơn giản phải không? giờ đây mỗi khi cần trigger Hover trên component nào đó, chúng ta chỉ cần đơn giản vài ba dòng là xong.

Và bây giờ sẽ là code!

Giải thích code

Quay lại đoạn code sử dụng ở trên:

Ta thấy rằng hàm useHover() trả về 1 object có chứa 2 tham số: hoverProps là hàm xử lý các sự kiện Hover để chèn vào component của bạn; isHovered là giá trị boolean, true khi hover chuột vào phần tử.
Bạn cũng có thể xử lý thêm các sự kiện hover bằng cách truyền vào props của hàm useHover():

Chi tiết trong hàm useHover() có lẽ cũng không cần giải thích gì thêm vì bản thân nó đã rất clean rồi phải không nào? Nếu bạn thấy chỗ nào khó hiểu, đừng ngần ngại comment phía dưới nhé! Mình sẽ giải đáp sớm nhất!

Kết thúc bài đầu tiên tại đây. Hi vọng bài viết này bổ ích đối với bạn. Cảm ơn bạn đã dành thời gian đọc bài của tôi!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo