Hướng Dẫn Toàn Diện Về React: Từ jQuery Đến Hooks

Khi nói đến phát triển frontend, một trong những cái tên mà bạn sẽ luôn nghe thấy là React. Ngày nay, nhiều dịch vụ và ứng dụng được xây dựng trên React - nhưng tại sao nó lại trở nên phổ biến như vậy?

Trong bài viết này, chúng ta sẽ khám phá sự tiến hóa từ jQuery đến React, phân tích các khái niệm cơ bản của React (component function, JSX, virtual DOM), và sau đó đi sâu vào Hooks và tối ưu hóa việc re-render.

1. Mối Quan Hệ Giữa JavaScript và React

JavaScript là nền tảng cho hành vi động trên web. React là một thư viện JavaScript được thiết kế để xây dựng giao diện người dùng hiệu quả hơn. Khác với jQuery, vốn thao tác trực tiếp trên DOM, React cung cấp một hệ thống để đồng bộ hóa trạng thái và giao diện người dùng, giúp việc xây dựng ứng dụng có thể mở rộng và bảo trì dễ dàng hơn.

2. Từ jQuery Đến React

Ưu Điểm của jQuery

• Thao tác DOM đơn giản ($("#id"))
• Tương thích đa trình duyệt
• Phù hợp với các trang web nhỏ với hiệu ứng nhanh và Ajax

Nhược Điểm của jQuery

• Khó quản lý trạng thái trong các ứng dụng lớn
• Mã thường trở thành “mì spaghetti” khi ứng dụng phát triển
• Vấn đề hiệu suất do thao tác trực tiếp trên DOM

Tại Sao Các Nhà Phát Triển Chuyển Sang React

• Sự gia tăng của Single Page Applications (SPAs) yêu cầu quản lý trạng thái tốt hơn
• Nhu cầu về phát triển giao diện người dùng dựa trên component có thể tái sử dụng
• Virtual DOM cung cấp khả năng render nhanh hơn và hiệu suất tốt hơn

👉 Ứng dụng nhỏ = jQuery hoạt động tốt.

Ứng dụng lớn = React trở thành lựa chọn tự nhiên.

3. React Là Gì?

React (React.js) là một thư viện UI được phát triển bởi Meta (trước đây là Facebook). Nó cho phép các nhà phát triển xây dựng ứng dụng với kiến trúc dựa trên component, giúp giao diện người dùng có thể tái sử dụng và bảo trì dễ dàng hơn.

Ưu Điểm của React

• Thiết kế dựa trên component
• Giao diện người dùng khai báo (miêu tả giao diện người dùng nên trông như thế nào cho một trạng thái nhất định)
• Đa nền tảng (ví dụ: React Native cho di động)
• Render nhanh với Virtual DOM

Nhược Điểm của React

• Đường cong học tập cao (JSX, ES6, Hooks)
• Thiết lập ban đầu có thể phức tạp (cần Webpack, Babel)
• Đôi khi không tương thích tốt với các plugin jQuery

4. Component Function Là Gì?

Trong React, giao diện người dùng được chia thành các component, những phần có thể tái sử dụng của giao diện. Có hai cách để định nghĩa chúng: component function và component class.

Component Function

function Hello({ name }) {
  return <h1>Xin chào, {name}!</h1>;
}

• Được định nghĩa như một hàm JavaScript đơn giản
• Chấp nhận props như tham số và trả về JSX

Component Class

class Hello extends React.Component {
  render() {
    return <h1>Xin chào, {this.props.name}!</h1>;
  }
}

Sự Khác Biệt và Tiêu Chuẩn Ngày Nay

• Trước đây, chỉ component class mới có thể quản lý trạng thái và các phương thức vòng đời
• Với Hooks, component function giờ đây cũng có thể quản lý trạng thái
• Component function đơn giản hơn, nhẹ hơn, và hiện là tiêu chuẩn ưu tiên

5. DOM So Với Virtual DOM

DOM

Cấu trúc cây được tạo ra bởi trình duyệt từ HTML và CSS. Việc thao tác trực tiếp là có thể, nhưng tốn kém về mặt hiệu suất.

Virtual DOM

React duy trì một bản sao nhẹ của DOM trong bộ nhớ. Khi có cập nhật xảy ra, React so sánh Virtual DOM mới với cái cũ và chỉ áp dụng các khác biệt vào DOM thực.

👉 Điều này làm cho việc render nhanh hơn rất nhiều.

6. JSX (JavaScript XML)

JSX Là Gì?

JSX cho phép bạn viết mã giống như HTML trực tiếp bên trong JavaScript.

const name = "React";
const element = <h1>Xin chào, {name}!</h1>;

Phía sau, điều này được chuyển đổi thành:

const element = React.createElement("h1", null, `Xin chào, ${name}!`);

Các Tính Năng Của JSX

• Phải trả về một phần tử gốc duy nhất
• Các biểu thức JavaScript có thể được nhúng với {}
• Thuộc tính sử dụng camelCase (className, onClick)

Lợi Ích Của JSX

• Cú pháp giống như HTML, dễ hiểu
• Tích hợp mạnh mẽ với JavaScript
• Hoạt động tốt với các IDE và công cụ kiểm tra kiểu

7. Giới Thiệu Về Hooks

Hooks cho phép các component function quản lý trạng thái và các tác động phụ.

useState (Quản Lý Trạng Thái)

const [count, setCount] = useState(0);

Cập nhật trạng thái kích hoạt việc re-render của component.

useEffect (Tác Động Phụ)

useEffect(() => {
  console.log("Chạy sau khi render ban đầu");
}, []);

Quản lý các tác động như gọi API, bộ đếm thời gian, và dọn dẹp.

useMemo (Ghi Nhớ)

const result = useMemo(() => heavyCalc(num), [num]);

Lưu lại các phép tính tốn kém để tránh tính toán không cần thiết.

useCallback & React.memo

• useCallback: ghi nhớ các hàm để props không thay đổi không cần thiết
• React.memo: ngăn chặn các component con re-render trừ khi props thay đổi

8. Tối Ưu Hóa Việc Re-Rendering

Việc Re-Rendering Có Nghĩa Là Gì?

• Khi bạn cập nhật trạng thái thông qua useState, component function chạy lại
• React tạo ra JSX mới, so sánh Virtual DOM, và cập nhật chỉ các khác biệt trong DOM thực

Component Cha và Con

• Nếu trạng thái của cha cập nhật, cha sẽ re-render → con cũng được đánh giá lại
• Tuy nhiên, nếu props không thay đổi, việc cập nhật DOM thực sẽ bị bỏ qua

Khi Nào Sử Dụng React.memo

• ✅ Các component con tốn kém để render
• ✅ Cha thường xuyên re-render nhưng props của con hiếm khi thay đổi
• ❌ Các component nhỏ hoặc thường xuyên thay đổi thì không được lợi nhiều

9. Kết Luận

• Việc chuyển từ jQuery sang React đã giải quyết các vấn đề về quản lý trạng thái và hiệu suất DOM
• Các tính năng cốt lõi của React: kiến trúc dựa trên component, giao diện người dùng khai báo, virtual DOM
• Component function + Hooks là tiêu chuẩn hiện đại để xây dựng ứng dụng React
• JSX làm cho mô tả giao diện người dùng trở nên trực quan và tích hợp chặt chẽ với JavaScript
• Re-render là điều không thể tránh khỏi, nhưng bạn có thể tối ưu hóa nó với React.memo, useMemo, và useCallback

👉 Tinh hoa của React là “đồng bộ hóa trạng thái và UI một cách đơn giản, hiệu quả.” Chúng ta đã tiến hóa từ việc thao tác DOM thủ công của jQuery sang mô hình khai báo của React, đạt được sự phát triển sạch hơn và có thể mở rộng hơn. Nếu bạn đã quen với những điều cơ bản này, bước tiếp theo là khám phá React Router (để định tuyến) và Redux hoặc Context (để quản lý trạng thái nâng cao).