CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.1. CÔNG NGHỆ PHÁT TRIỂN FRONT-END
2.1.1. ReactJS là gì?
Hình 2.1. ReactJS
(Nguồn: https://t3h.com.vn/tin-tuc/jsx-trong-reactjs)
ReactJS là một thư viện JavaScript mã nguồn mở được Facebook phát triển và ra mắt vào năm 2013. Thư viện này được sử dụng để xây dựng các thành phần giao diện người dùng (UI) trên website. ReactJS có một điểm nổi bật là có thể render dữ liệu ở cả phía máy chủ (server) và phía máy khách (client).
Theo trích dẫn từ tài liệu của website React thì nguyên lý xây dựng của ReactJS dựa trên components (component-based approach), có thể tái sử dụng và phù hợp với ứng dụng một trang (Single Page Application – SPA). ReactJS giúp lập trình viên xây dựng giao diện người dùng dựa trên JSX (một cú pháp mở rộng của JavaScript), tạo ra các DOM ảo (virtual DOM) để tối ưu việc render một trang web. DOM ảo là một bản sao DOM thực tế của trang web. Khi dữ liệu của ứng dụng thay đổi, ReactJS sẽ chỉ cập nhật DOM ảo. Điều này giúp cải thiện hiệu suất của ứng dụng [2].
ReactJS được thiết kế dựa trên các thành phần UI riêng lẻ, giúp dễ dàng tái sử dụng
Những tính năng này đã giúp ReactJS trở thành một lựa chọn hàng đầu cho các nhà phát triển web, và hiện tại ReactJS vẫn đang chiếm vị trí số 1 trong các thư viện Front- End hiện tại.
ReactJS là một thư viện rất phổ biến và được sử dụng bởi nhiều ứng dụng web nổi tiếng, bao gồm Facebook, Instagram, Netflix, Airbnb và Uber.
2.1.2. JSX
Hình 2.2. JSX
(Nguồn: https://www.w3schools.com/js/js_htmldom.asp)
Theo trích dẫn từ tài liệu của website React thì JSX là viết tắt của JavaScript XML, là một cú pháp mở rộng cho JavaScript cho phép lập trình viên viết HTML trong React một cách dễ dàng. JSX được dịch sang JavaScript thông thường trong thời gian chạy mã.
Nó cho phép các nhà phát triển viết HTML theo cách tự nhiên và dễ hiểu hơn [2].
Một số ưu điểm của JSX trong React:
• Tối ưu hóa mã JavaScript trong quá trình biên dịch giúp tăng tốc độ ứng dụng.
• JSX có thể giúp giảm thiểu thời gian phát triển ứng dụng bằng cách phát hiện lỗi sớm trong quá trình biên dịch.
• JSX giúp các nhà phát triển quen thuộc với HTML viết các mẫu HTML một cách hiệu quả hơn.
2.1.3. Virtual DOM
Theo trích dẫn từ tài liệu của website React thì DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), đại diện cho giao diện người dùng trong ứng dụng. Khi giao diện người dùng thay đổi, DOM sẽ cập nhật để phản ánh sự thay đổi đó [2]. Việc thao tác quá nhiều lên DOM có thể làm giảm hiệu suất ứng dụng và khiến ứng dụng chậm hơn.
DOM được biểu diễn dưới dạng cấu trúc dữ liệu cây (tree). Do đó các thay đổi và cập nhật đối với DOM diễn ra nhanh chóng. Nhưng sau mỗi lần thay đổi thì phần tử được cập nhật và các phần tử con của nó sẽ hiển thị lại để cập nhật giao diện người dùng.
Việc render và hiển thị lại là nguyên nhân khiến cho ứng dụng chậm đi. Do đó, càng có nhiều thành phần giao diện người dùng, thì các bản cập nhật DOM càng nhiều, vì chúng sẽ cần được hiển thị lại cho mỗi bản cập nhật DOM.
DOM ảo là một giải pháp cho vấn đề hiệu suất của DOM thực. DOM ảo là một bản sao ảo của DOM thực, chỉ được cập nhật khi trạng thái ứng dụng thay đổi. Điều này giúp cải thiện hiệu suất bằng cách giảm số lượng bản cập nhật DOM thực cần thiết.
Khi thêm các phần tử mới vào giao diện người dùng, một DOM ảo sẽ được tạo dưới dạng cây. Mỗi phần tử là một nút trên cây này. Khi trạng thái của bất kỳ phần tử nào thay đổi, một cây DOM ảo mới sẽ được tạo. Cây mới này sau đó được so sánh với cây DOM ảo trước đó để xác định các thay đổi cần thiết. DOM ảo sẽ tính toán phương pháp tốt nhất để thực hiện các thay đổi này đối với DOM thực. Điều này đảm bảo tối thiểu hóa hoạt động cập nhật DOM thực và cải thiện hiệu suất.
2.1.4. Component
Component trong ReactJS là các cấu trúc cốt lõi của React. Nói cách khác, mọi ứng dụng phát triển trong React sẽ được tạo thành từ các phần được gọi là Component.
Theo trích dẫn từ tài liệu của website React, component sẽ giúp phân chia giao diện người dùng (UI) thành các thành phần nhỏ hơn để việc quản lý và tái sử dụng trở nên đơn giản. Mỗi component sẽ đảm nhiệm từng phần hiển thị khác nhau của giao diện. Khi hợp nhất tất cả các component riêng lẻ này, ta sẽ nhận được giao diện người dùng cuối cùng [2].
Về cơ bản, các Component trong React sẽ trả về một đoạn mã JSX cho biết những gì được hiển thị trên màn hình. Trong React, chúng ta sẽ có hai loại thành phần chính là Class component và Function component [2].
2.1.5. Props và State
State là trạng thái của component. State có thể được thay đổi bởi người dùng hoặc bởi các phần tử khác trong ứng dụng [2].
Props là các thuộc tính được truyền cho component từ các phần tử khác trong ứng dụng. Props có thể được sử dụng để định cấu hình trạng thái hoặc hành vi của component [2].
2.1.6. Component Life Cycle
Life cycle của component trong ReactJS là quá trình từ khi tạo ra, thay đổi và hủy bỏ component. Gồm 3 giai đoạn:
Hình 2.4. Component Life Cycle
(Nguồn: https://fullstack.edu.vn/blog/co-ban-life-cycle-cua-component-trong- reactjs.html)
2.1.6.1. Tạo ra (Mounting):
• constructor: Được gọi đầu tiên khi component được tạo. Sử dụng để khởi tạo biến state, gắn event listener và thực hiện các thiết lập ban đầu.
• render: Được gọi sau constructor, trả về phần tử HTML hoặc JavaScript XML (JSX) sẽ được render lên màn hình.
• componentDidMount: Được gọi sau khi component được render xong và gắn vào DOM. Sử dụng để thực hiện các tác vụ phụ thuộc vào DOM như fetch dữ liệu, khởi động timer hoặc đăng ký event listener.
2.1.6.2. Thay đổi (Updating):
• componentDidUpdate: Được gọi sau khi component được render lại và cập nhật DOM. Thích hợp để cập nhật state hoặc thực hiện các tác vụ phụ thuộc vào DOM sau khi cập nhật.
2.1.6.3. Hủy bỏ (UnMounting):
• componentWillUnmount: Được gọi trước khi component bị gỡ bỏ khỏi DOM. Sử dụng để hủy đăng ký event listener, dừng hoạt động chạy nền hoặc dọn dẹp các nguồn tài nguyên khác.