[React Basics] React Handling Events: Những cách làm hiệu quả và tối ưu

Trong thế giới phát triển web hiện đại, việc tạo ra các sản phẩm giàu tính tương tác và linh hoạt là yếu tố then chốt để thu hút và giữ chân người dùng. React, thư viện JavaScript hàng đầu của Meta, đã cách mạng hóa cách chúng ta xây dựng UI bằng cách cung cấp một mô hình lập trình mạnh mẽ và hiệu quả, và một trong những khái niệm nền tảng và quan trọng nhất trong React chính là Handling Events (xử lý sự kiện).

Vậy xử lý sự kiện trong React là gì? Nó có gì khác biệt so với cách làm truyền thống với DOM? Làm thế nào để xử lý sự kiện một cách hiệu quả và chuyên nghiệp? Bài viết này sẽ dẫn bạn đi từ những khái niệm cơ bản nhất đến các kỹ thuật nâng cao, giúp bạn làm chủ hoàn toàn việc xử lý sự kiện trong các ứng dụng React của mình. 🚀

1. Sự khác biệt cốt lõi: React Events vs. DOM Events

Nếu bạn đã từng làm việc với JavaScript thuần, bạn hẳn đã quen với việc thêm các trình xử lý sự kiện trực tiếp vào các phần tử HTML. Tuy nhiên, React có một cách tiếp cận hơi khác biệt nhưng lại vô cùng thông minh.

Sự khác biệt chính nằm ở hai điểm:

• Quy ước đặt tên: Thay vì sử dụng chữ thường như onclick, React sử dụng quy ước camelCase, ví dụ như onClick.
• Truyền function: Thay vì truyền một chuỗi (string) như trong HTML, với JSX bạn sẽ truyền một function.

Hãy xem qua ví dụ so sánh đơn giản sau:

HTML truyền thống:

<button onclick="showAlert()">Click Me</button>

React (JSX):

<button onClick={showAlert}>Click Me</button>

Sự thay đổi nhỏ này mang lại lợi ích to lớn: code của bạn trở nên sạch sẽ, dễ đọc và dễ bảo trì hơn rất nhiều.

Một điểm khác biệt quan trọng nữa là React sử dụng một hệ thống sự kiện riêng gọi là SyntheticEvent. Đây là một lớp bao bọc (wrapper) xung quanh các sự kiện gốc của trình duyệt. SyntheticEvent giúp giải quyết các vấn đề không nhất quán về sự kiện giữa các trình duyệt khác nhau, đảm bảo ứng dụng của bạn hoạt động ổn định trên mọi nền tảng.

2. Cú pháp cơ bản và Cách thức hoạt động

Trong React, việc xử lý sự kiện thường được thực hiện ngay trong component. Hãy cùng khám phá các cách phổ biến nhất.

Với Function Components (Hooks)

Đây là cách tiếp cận hiện đại và được khuyến khích sử dụng. Với sự ra đời của Hooks, việc quản lý state và xử lý sự kiện trong các function component trở nên đơn giản hơn bao giờ hết.

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  // Định nghĩa hàm xử lý sự kiện
  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1)
    console.log('Button was clicked!')
  }

  return (
    <div>
      <p>Bạn đã click {count} lần</p>
      <button onClick={handleIncrement}>Tăng lên</button>
    </div>
  )
}

Phân tích:

• Chúng ta định nghĩa một hàm handleIncrement ngay bên trong component.
• Hàm này sau đó được truyền trực tiếp vào thuộc tính onClick của thẻ <button>.
• Khi người dùng click vào nút, React sẽ gọi hàm handleIncrement, cập nhật state và render lại component với giá trị mới.

Ngăn chặn hành vi mặc định

Giống như trong DOM, đôi khi bạn cần ngăn chặn hành vi mặc định của một phần tử, ví dụ như việc gửi form và tải lại trang. Trong React, bạn có thể làm điều này bằng cách gọi e.preventDefault() một cách tường minh.

function LoginForm() {
  const handleSubmit = (e) => {
    e.preventDefault()
    console.log('Form đã được submit mà không tải lại trang!')
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  )
}

3. Truyền đối số cho trình xử lý sự kiện

Đây là một nhu cầu rất phổ biến. Bạn muốn truyền thêm dữ liệu vào hàm xử lý sự kiện, ví dụ như id của một mục trong danh sách. Có hai cách chính để thực hiện điều này:

Sử dụng Arrow Function

Đây là cách phổ biến và dễ đọc nhất. Bạn tạo một arrow function ngay trong JSX và gọi hàm xử lý của mình từ bên trong đó.

function ProductList() {
  const products = [
    { id: 1, name: 'iPhone 15' },
    { id: 2, name: 'Samsung Galaxy S24' },
  ]

  const handleAddToCart = (productId, productName) => {
    console.log(
      `Đã thêm sản phẩm ${productName} (ID: ${productId}) vào giỏ hàng.`,
    )
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name}
          <button onClick={() => handleAddToCart(product.id, product.name)}>
            Thêm vào giỏ
          </button>
        </li>
      ))}
    </ul>
  )
}

Lưu ý: () => handleAddToCart(...) tạo ra một hàm mới mỗi khi component render. Với các ứng dụng nhỏ, điều này không ảnh hưởng nhiều đến hiệu suất. Tuy nhiên, với các component phức tạp hoặc danh sách lớn, bạn nên cân nhắc sử dụng các kỹ thuật tối ưu hóa như useCallback.

Sử dụng Function.prototype.bind

Phương thức này ít phổ biến hơn trong các function component hiện đại nhưng vẫn rất hữu ích để biết, đặc biệt khi làm việc với các codebase cũ sử dụng class component.

<button onClick={this.handleClick.bind(this, id)}>Delete</button>

4. Event Pooling và SyntheticEvent

Như đã đề cập, React sử dụng SyntheticEvent. Một khái niệm quan trọng cần biết là Event Pooling.

Trong các phiên bản React cũ (trước v17), để tối ưu hóa hiệu suất, các đối tượng sự kiện (event objects) sẽ được "gom" lại. Sau khi hàm xử lý sự kiện được thực thi, tất cả các thuộc tính trên đối tượng sự kiện sẽ bị vô hiệu hóa (set thành null). Điều này có nghĩa là bạn không thể truy cập sự kiện theo cách bất đồng bộ.

function handleChange(e) {
  // e.persist(); // Cần thiết trong React < 17 để truy cập bất đồng bộ
  setTimeout(() => {
    console.log(e.target.value) // Sẽ báo lỗi trong React < 17 nếu không có e.persist()
  }, 100)
}

Tin vui: Kể từ React 17, cơ chế Event Pooling đã được loại bỏ. Điều này giúp đơn giản hóa việc xử lý sự kiện và bạn có thể truy cập các thuộc tính của sự kiện bất cứ khi nào bạn cần mà không cần gọi e.persist(). Đây là một cải tiến đáng kể giúp code của bạn trở nên tự nhiên và dễ đoán hơn.

5. Các kỹ thuật nâng cao và Tối ưu hóa

Event Delegation

React tự động sử dụng kỹ thuật Event Delegation (ủy quyền sự kiện). Thay vì gắn một trình xử lý sự kiện cho mỗi phần tử con, React chỉ gắn một trình xử lý duy nhất ở cấp độ gốc của ứng dụng (root). Khi một sự kiện xảy ra, React sẽ xác định component nào đã kích hoạt nó và gọi hàm xử lý tương ứng.

Điều này mang lại lợi ích to lớn về hiệu suất, đặc biệt là với các danh sách dài hoặc các bảng dữ liệu phức tạp, vì nó làm giảm đáng kể việc sử dụng bộ nhớ.

Tối ưu hóa với useCallback

Khi bạn truyền một hàm xử lý sự kiện xuống các component con, nếu hàm đó được tạo lại mỗi lần render, nó có thể khiến các component con cũng phải render lại một cách không cần thiết (đặc biệt khi chúng được bọc trong React.memo).

Hook useCallback sẽ giúp "ghi nhớ" (memoize) hàm của bạn, đảm bảo rằng nó chỉ được tạo lại khi các phụ thuộc (dependencies) của nó thay đổi.

import React, { useState, useCallback } from 'react'

// Giả sử ChildComponent được bọc trong React.memo
const ChildComponent = React.memo(({ onAction }) => {
  console.log('ChildComponent re-rendered')
  return <button onClick={onAction}>Perform Action</button>
})

function ParentComponent() {
  const [count, setCount] = useState(0)

  // handleAction chỉ được tạo lại khi count thay đổi
  const handleAction = useCallback(() => {
    console.log('Action performed with count:', count)
  }, [count]) // Phụ thuộc vào count

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>Increment Count</button>
      <ChildComponent onAction={handleAction} />
    </div>
  )
}

Sử dụng useCallback một cách hợp lý là chìa khóa để tối ưu hóa hiệu suất cho các ứng dụng React lớn.

Kết luận: Nắm vững Handling Events để code React tốt hơn

Xử lý sự kiện không chỉ là một phần cơ bản mà còn là một nghệ thuật trong lập trình React. Bằng cách hiểu rõ cách React hoạt động "phía sau cánh gà" với SyntheticEvent, áp dụng đúng cú pháp cho function components, và biết cách truyền đối số một cách linh hoạt, bạn đã nắm trong tay những kỹ năng cần thiết để xây dựng các ứng dụng tương tác.

Hơn thế nữa, việc áp dụng các kỹ thuật nâng cao như tối ưu hóa với useCallback và hiểu rõ về cơ chế ủy quyền sự kiện sẽ giúp bạn nâng tầm code của mình, tạo ra các ứng dụng không chỉ mạnh mẽ về tính năng mà còn vượt trội về hiệu suất.

Chúc bạn thành công trên hành trình chinh phục React!