Hướng dẫn Xử lý Sự kiện trong React

Toàn bộ trang web của bạn có bị tải lại khi bạn nhấp vào một nút không? Ô nhập liệu của bạn có không cập nhật state khi bạn đang gõ không? Bạn có thể gặp phải những vấn đề này nếu không xử lý sự kiện đúng cách trong React.

Xử lý sự kiện có nghĩa là bắt các hành động của người dùng như nhấp chuột (click), gửi biểu mẫu (submit) hoặc thay đổi (change) và phản hồi lại chúng. React sử dụng một hệ thống gọi là SyntheticEvent. Điều này đảm bảo mã của bạn hoạt động đồng nhất trên tất cả các trình duyệt như Chrome, Safari và Firefox.

Những khác biệt chính giữa sự kiện HTML và React:

  • Naming: Sử dụng camelCase trong React. Sử dụng onClick thay vì onclick.
  • Handlers: Truyền một tham chiếu hàm trong React. Sử dụng dấu ngoặc nhọn thay vì chuỗi (strings).
  • Prevention: Luôn gọi event.preventDefault() để dừng hành vi mặc định của trình duyệt.

Cách React xử lý sự kiện:

React không gắn các trình lắng nghe (listeners) vào từng node riêng lẻ. Nó sử dụng Event Delegation. Nó gắn một trình lắng nghe duy nhất vào phần tử gốc (root element). Điều này giúp tiết kiệm bộ nhớ và cải thiện hiệu suất.

Các mẫu (patterns) phổ biến thường dùng:

  • Click Counter: Sử dụng một hàm để cập nhật state khi người dùng nhấp vào một nút.
  • Form Handling: Sử dụng event.target.name và event.target.value để cập nhật nhiều trường nhập liệu chỉ với một hàm. Luôn sử dụng event.preventDefault() khi gửi form để ngăn việc tải lại trang.
  • Passing Arguments: Nếu bạn cần truyền một ID vào một hàm, hãy sử dụng arrow function. Hãy viết onClick={() => handleDelete(id)}. Đừng viết onClick={handleDelete(id)} vì nó sẽ thực thi ngay lập tức trong quá trình render.

Tránh những lỗi sau:

  • Infinite Loops: Đừng bao giờ gọi trực tiếp một hàm trong thuộc tính onClick. Điều này sẽ kích hoạt cập nhật state trong quá trình render, dẫn đến một lần render khác.
  • Undefined Events: Luôn bao gồm tham số event trong định nghĩa hàm của bạn nếu bạn cần gọi preventDefault().
  • Memory Leaks: Nếu bạn thêm các trình lắng nghe thủ công như window.addEventListener trong một useEffect hook, hãy luôn xóa chúng trong hàm cleanup.

Các thực hành tốt nhất (best practices) để tối ưu hiệu suất:

  • Tránh tạo các hàm mới bên trong vòng lặp .map() nếu danh sách của bạn rất lớn.
  • Sử dụng hook useCallback khi truyền các trình xử lý cho các component con.
  • Dọn dẹp các trình lắng nghe sự kiện tùy chỉnh để giữ cho ứng dụng của bạn chạy nhanh.

Làm chủ các sự kiện là chìa khóa để xây dựng các ứng dụng React có tính tương tác cao.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69