React Cơ bản: JSX và Virtual DOM

Rate this post

React không giống như nhiều Javascript Framework khác, bởi thay vì làm việc với các DOM elements của trình duyệt, React tạo ra sự hiện diện ảo (virtual representation) của các DOM.

Với React, chúng ta không trực tiếp mô phỏng 1 DOM thật sự. Thay vào đó, chúng ta tạo ra sự mô phỏng ảo và để React xử lý công việc thay đổi các DOM trên trình duyệt.

Tại sao không sửa các DOM có sẵn?

Thông thường, khi chúng ta lập trình web cơ bản (như sử dụng jQuery), nó thường theo dạng thức:

  1. Tìm element, chẳng hạn sử dụng .find(), hoặc vanilla javascript như document.querySelector() hay document.getElementById().
  2. Sau đó, chỉnh sửa các element tìm được, như .css(), hay .innerHTML()

Quá trình này có những vấn đề của nó:

  1. Thật khó để theo dõi thay đổi trạng thái hiện tại của element theo dạng thức ta cần.
  2. Nó có vẻ chậm hơn.

Thế nào là Virtual DOM?

Virtual DOM được sinh ra để xử lý những vấn đề trên.

Thực chất, Virtual DOM là 1 cây (tree) bao gồm các Javascript objects thay thế các DOM thực sự. Một trong những lý do thú vị nhất để sử dụng Virtual DOM là API. Khi sử dụng Virtual DOM chúng ta có thể khởi tạo lại DOM trong mỗi update.

Ý tưởng khởi tạo lại kết quả của DOM có vẻ khả thi và phù hợp với mô hình lập trình dễ hiểu: thay vì liên tục theo dõi sự thay đổi của DOM (vd .hasClass()), lập trình viên chỉ cần trả lại DOM mà anh ta muốn mọi người thấy. React sẽ lo phần thay đổi phía sau.

Virtual DOM sẽ:

  1. Sử dụng thuật toán so sánh thay đổi để biết những gì đã thay đổi
  2. Cập nhật danh mục DOM đồng thời
  3. Cập nhật hàng loạt vào DOM

Chính những điều đó sẽ giúp dễ sử dụng và tối ưu hoá để xây dựng web app hơn.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...