- vừa được xem lúc

Tìm hiểu về Virtual DOM trong React

0 0 478

Người đăng: Phan Van Hung

Theo Viblo Asia

Nếu bạn đang dùng React hoặc đang học ReactJS, chắc hẳn bạn đã nghe qua thuật ngữ Virtual DOM . Vậy Virtual DOM là gì và tại sao React lại sử dụng nó. Chúng ta hãy cùng tìm hiểu nhé. Let's go!

Real DOM

Real DOM hay là DOM thật. Đầu tiên DOM được hiểu là viết tắt của 'Document Object Model'. DOM sẽ đại diện cho giao diện người dùng trong ứng dụng của bạn. Mỗi khi có sự thay đổi về trạng thái của giao diện người dùng, DOM sẽ cập nhật để thể hiện sự thay đổi đó. Việc thường xuyên thao tác lên DOM sẽ gây giảm hiệu suất, làm ứng dụng của bạn chậm hơn.

Điều gì làm giảm hiệu suất của DOM

DOM được biểu diễn dưới dang 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 của bạn chậm đi. Do đó, bạn 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

Virtual DOM

Đó là lúc khái niệm virtual DOM (DOM ảo) xuất hiện và hoạt động tốt hơn đáng kể so vơi DOM thực. DOM ảo chỉ là một đại diện ảo của DOM. Mỗi khi trạng thái ứng dụng i thay đổi, DOM ảo được cập nhật thay vì DOM thực

Chà, có thể bạn thắc mắc : "Có phải DOM ảo cũng đang hoạt động giống như DOM thực, điều này nghe có vẻ như làm việc gấp đôi? Làm thế nào điều này có thể nhanh hơn chỉ cập nhật DOM thực? ”

Câu trả lời là DOM ảo nhanh hơn và hiệu quả hơn nhiều, đây là lý do tại sao.

Tại sao Virtual Dom (DOM ảo) lại nhanh hơn?

Khi các phần tử mới được thêm vào giao diện người dùng, một DOM ảo, được biểu thị dưới dạng cây sẽ được tạo. Mỗi phần tử là một nút trên cây này. Nếu trạng thái của bất kỳ phần tử nào trong số này thay đổi. Cây này sau đó được so sánh hoặc "diffing" với cây DOM ảo trước đó.

Khi điều này được thực hiện xong, DOM ảo sẽ tính toán phương pháp tốt nhất có thể để thực hiện những thay đổi này đối với DOM thực. Điều này đảm bảo rằng có các hoạt động tối thiểu trên DOM thực. Do đó, giảm chi phí hiệu suất của việc cập nhật DOM thực.

Hình ảnh bên dưới cho thấy cây DOM ảo và quá trình khác nhau.

Các nút màu đỏ đại diện cho các nút đã thay đổi. Các nút này đại diện cho các phần tử giao diện người dùng đã bị thay đổi trạng thái. Sau đó sẽ tính toán sự khác biệt giữa phiên bản trước của cây DOM ảo và cây DOM ảo hiện tại. Toàn bộ cây con chính sau đó được render lại để cung cấp giao diện người dùng. Cây cập nhật này sau đó được cập nhật hàng loạt vào DOM thực

Cách React sử dụng Virtual DOM

Bây giờ bạn đã hiểu rõ về Virtual DOM là gì và nó có thể giúp ích như thế nào đối với hiệu suất ứng dụng của bạn, hãy cùng tìm hiểu cách React tận dụng DOM ảo như nào nhé.

Trong React, mỗi phần giao diện người dùng là một thành phần (component) và mỗi thành phần có một trạng thái. React tuân theo mô hình có thể quan sát được và lắng nghe các thay đổi trạng thái. Khi trạng thái của một thành phần thay đổi, React sẽ cập nhật cây DOM ảo. Khi DOM ảo đã được cập nhật, React sau đó sẽ so sánh phiên bản hiện tại của DOM ảo với phiên bản trước của DOM ảo. Quá trình này được gọi là "diffing".

Khi React biết đối tượng DOM ảo nào đã thay đổi, thì React chỉ cập nhật các đối tượng đó trong DOM thực. Điều này làm cho hiệu suất tốt hơn nhiều so với thao tác trực tiếp với DOM thực. Do đó làm cho React nổi bật như một thư viện JavaScript hiệu suất cao.

Trên đây là một số chia sẻ về cách hoạt động của virtual DOM trong React. Cảm ơn mn đã theo dõi

Bài viết tham khảo tại nguồn: React virtual DOM

Bình luận

Bài viết tương tự

- vừa được xem lúc

10 câu hỏi phỏng vấn React cơ bản dành cho các developer

1. Ưu nhược điểm của React. Ưu điểm:. .

0 0 99

- vừa được xem lúc

Tìm hiểu về ESlint và cách cấu hình trong React

Eslint là gì . vậy Eslint được tạo ra để làm gì .

0 0 320

- vừa được xem lúc

Hướng dẫn cấu hình ReactJS với Webpack và Babel

Ok trong bài viết này, mình sẽ hướng dẫn các bạn cấu hình dự án ReactJS kết hợp Webpack và Babel. Bài viết này được thực hiện năm 2021 được cấu hình trên Webpack 5, như các bạn biết thì các bài viết c

0 0 135

- vừa được xem lúc

Tips and tricks trong ReactJS

Dưới đây sẽ là một số thủ thuật tuyệt vời mà bạn có thể áp dụng để cải thiện chất lương project React của mình. Hãy áp dụng những thủ thuật này trong project React của bạn ngay hôm nay thôi nào.

0 0 139

- vừa được xem lúc

Tìm hiểu về Reactjs căn bản

Chắc hẳn "React" đã không còn là từ mới lạ đối với các bạn nữa vì sự phổ biến của nó, đã có nhiều "đàn anh" đi trước như : Angular, Backbone,... Thế nhưng sự cạnh tranh của React là không hề kém cạnh,

0 0 51

- vừa được xem lúc

Todo Reactjs và thay đổi Location

Giới thiệu. Reatcjs là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây dựng giao diện người dùng hoặc các thành phần UI.

0 0 38