React Event, React Refs và High Order Component

Giới thiệu

Trong lĩnh vực phát triển ứng dụng web, React đã trở thành một trong những công nghệ phổ biến nhất. Với việc sử dụng React, chúng ta có thể xây dựng các ứng dụng web phức tạp và tương tác một cách dễ dàng. Trong bài viết này, chúng ta sẽ tìm hiểu về ba khái niệm quan trọng trong React: React Event, React Refs và High Order Component.

React Event

DOM Event và React Event

Trong lĩnh vực phát triển ứng dụng web, hiểu về sự kiện là rất quan trọng. Sự kiện là các hành động hoặc sự xuất hiện xảy ra trong trình duyệt, ví dụ như nhấp chuột vào một nút hoặc nhấn một phím. Trong JavaScript truyền thống, chúng ta xử lý sự kiện bằng cách sử dụng bộ lắng nghe sự kiện DOM. Tuy nhiên, khi làm việc với React, chúng ta sử dụng bộ event listeners React thay thế.

Bộ lắng nghe sự kiện React tương tự như bộ lắng nghe sự kiện DOM, nhưng nó cung cấp một cách thức thống nhất và nhất quán hơn để xử lý sự kiện trên các trình duyệt khác nhau. React sử dụng hệ thống Synthetic Event để xử lý sự kiện một cách hiệu quả và tối ưu hơn.

Khi sử dụng React event listeners, chúng ta gắn các trình xử lý sự kiện trực tiếp vào các thành phần React. Ví dụ, chúng ta có thể sử dụng sự kiện onClick để xử lý sự kiện nhấp chuột trên một nút trong React:

import React from 'react';

function Button() {
  const handleClick = () => {
    console.log('Nút đã được nhấp!');
  };

  return (
    <button onClick={handleClick}>Nhấp vào tôi</button>
  );
}

export default Button;

Trong ví dụ trên, khi nhấp chuột vào nút, hàm handleClick được gọi và thông báo "Nút đã được nhấp!" được ghi vào console.

Bằng cách sử dụng React event listeners, chúng ta có thể xử lý sự kiện một cách rõ ràng và trực quan, làm cho mã của chúng ta dễ đọc và bảo trì hơn.

React Synthetic Event

React Synthetic Event là một khái niệm quan trọng trong React, cho phép chúng ta xử lý các sự kiện trong ứng dụng React một cách dễ dàng và linh hoạt. React sử dụng một lớp gọi là SyntheticEvent để đại diện cho các sự kiện của DOM, và đảm bảo tính nhất quán và tương thích giữa các trình duyệt.

Ví dụ, chúng ta có thể sử dụng sự kiện onClick để xử lý sự kiện nhấp chuột trên một thành phần trong React. Sử dụng SyntheticEvent, chúng ta có thể truy cập thông tin về sự kiện như tọa độ chuột, phím bấm đồng thời với nhấp chuột và nhiều thông tin khác.

Dưới đây là một ví dụ minh họa về việc sử dụng React Synthetic Event:

 import React from 'react';

function Button() {
  const handleClick = (event) => {
    console.log('Button clicked!');
    console.log('Mouse coordinates:', event.clientX, event.clientY);
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default Button;

Trong ví dụ trên, khi người dùng nhấp chuột vào nút "Click me", hàm handleClick sẽ được gọi và thông tin về sự kiện sẽ được truyền vào như đối số. Chúng ta có thể sử dụng các thuộc tính của SyntheticEvent như clientX và clientY để lấy tọa độ của chuột khi nhấp chuột.

Nhờ vào React Synthetic Event, chúng ta có thể xử lý các sự kiện một cách linh hoạt và tiện lợi trong ứng dụng React của chúng ta.

React Refs

React Refs là một tính năng của React cho phép chúng ta truy cập và tương tác với các phần tử DOM hoặc thành phần React trong ứng dụng của chúng ta. Điều này cho phép chúng ta thực hiện các thao tác như lấy giá trị của một ô nhập liệu, thay đổi nội dung của một phần tử hoặc thực hiện các hoạt động tương tác khác với các thành phần trong ứng dụng của chúng ta.

Ví dụ, chúng ta có thể sử dụng React Refs để thay đổi giá trị của một ô nhập liệu. Bằng cách tham chiếu đến ô nhập liệu thông qua React Refs, chúng ta có thể lấy giá trị hiện tại của ô nhập liệu và thay đổi giá trị đó khi cần thiết mà không render lại component.

Dưới đây là một ví dụ minh họa về việc sử dụng React Refs:

import React, { useRef } from 'react';

function InputExample() {
  const inputRef = useRef(null);

  const handleClick = () => {
    const value = inputRef.current.value;
    alert(`Giá trị của ô nhập liệu: ${value}`);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Lấy giá trị</button>
    </div>
  );
}

export default InputExample;

Trong ví dụ trên, chúng ta sử dụng useRef để tạo một tham chiếu đến ô nhập liệu. Khi người dùng nhấn vào nút "Lấy giá trị", chúng ta lấy giá trị của ô nhập liệu thông qua inputRef.current.value và hiển thị nó trong promt của build-in Browser.

Nhờ vào React Refs, chúng ta có thể thực hiện các tương tác với các phần tử DOM hoặc thành phần React một cách dễ dàng và linh hoạt trong ứng dụng React của chúng ta.

High Order Component

High Order Component (HOC) là một khái niệm quan trọng trong React cho phép chúng ta tái sử dụng logic và chức năng của các thành phần trong ứng dụng của chúng ta. HOC là một hàm nhận vào một thành phần và trả về một thành phần mới với các tính năng bổ sung.

Ví dụ, chúng ta có thể sử dụng HOC để thêm chức năng xác thực vào một thành phần. Bằng cách bọc một thành phần trong một HOC, chúng ta có thể kiểm tra xem người dùng đã đăng nhập hay chưa và hiển thị nội dung phù hợp.

Dưới đây là một ví dụ minh họa về việc sử dụng High Order Component:

import React, { useState, useEffect } from 'react';

function withAuth(WrappedComponent) {
  return function AuthProtectedComponent(props) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
      // Kiểm tra xác thực tại đây
      // Nếu người dùng đã đăng nhập, thiết lập isAuthenticated thành true
    }, []);

    if (isAuthenticated) {
      return <WrappedComponent {...props} />;
    } else {
      return <p>Bạn cần đăng nhập để truy cập nội dung này.</p>;
    }
  };
}

function ProtectedComponent() {
  return <div>Nội dung được bảo vệ</div>;
}

const AuthProtectedComponent = withAuth(ProtectedComponent);

export default AuthProtectedComponent;

Trong ví dụ trên, chúng ta tạo một HOC có tên là withAuth. HOC này kiểm tra xem người dùng đã đăng nhập hay chưa bằng cách sử dụng hook useState để lưu trữ trạng thái isAuthenticated. Sử dụng hook useEffect, chúng ta có thể thực hiện kiểm tra xác thực khi thành phần được hiển thị lần đầu tiên. Nếu người dùng đã đăng nhập, nội dung của thành phần được bọc (WrappedComponent) sẽ được hiển thị. Nếu người dùng chưa đăng nhập, một thông báo yêu cầu đăng nhập sẽ được hiển thị.

Nhờ vào High Order Component, chúng ta có thể tái sử dụng logic và chức năng của các thành phần và áp dụng chúng vào phát triển ứng dụng React của chúng ta một cách dễ dàng và linh hoạt.

Kết luận

Trên đây là ba khái niệm quan trọng trong React: React Event, React Refs và High Order Component. React Event cho phép chúng ta xử lý các sự kiện trong ứng dụng React. React Refs cho phép chúng ta truy cập và tương tác với các phần tử DOM hoặc thành phần React. High Order Component cho phép chúng ta tái sử dụng logic và chức năng của các thành phần. Hi vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về những khái niệm quan trọng này trong React và áp dụng chúng vào phát triển ứng dụng của mình.