React Virtual DOM tìm hiểu về chúng nào

Spread the love

Here I go :)) Nếu bạn đang học tập và làm việc với React hoặc củ Vue thì bạn sẽ đọc được về 1 khái niệm gọi là Virtual DOM. Hôm nay, mình sẽ trình bày một góc nhìn cơ bản về Virtual DOM để mọi người có thể hiểu hơn.

Real DOM

DOM là viết tắt của cụm từ Document Object Model, nói đơn giản hơn nó đại diện cho giao diện của ứng dụng của bạn. Mỗi khi có sự thay đổi về trạng thái của giao diện, do người dùng tương tác thì DOM sẽ được cập nhật để thể hiện sự thay đổi đó. Bây giờ, việc thường xuyên thao tác DOM, sẽ ảnh hưởng đến hiệu suất, khiến nó càng ngày càng chậm. Chúng nó không khác gì cái nhà của bạn, khi chưa có cái gì trong nhà thì đồ đạc được sắp xếp rất gọn gàng, nhưng khi có thêm tivi, tủ lạnh, giường chiếu, chăn màn, tủ tỉ thì mỗi lúc việc dọn nhà đón Tết lại càng mất thêm nhiều thời gian.

Virtual DOM

Khái niệm 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 của chúng tôi thay đổi, DOM ảo sẽ được cập nhật thay vì DOM thực.

Chà, bạn có thể hỏi “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.

Làm thế nào mà Virtual DOM nó nhanh như vậy?

Đầu tiên, có 1 cây DOM ảo, sau đó, người dùng thay đổi sẽ tạo ra thêm 1 cây DOM ảo nữa. Bằng việc dùng thuật toán so sánh, người ta biết được node nào thay đổi dẫn tới việc mình chỉ cần cập nhật cái cục Node đó của DOM thật. Từ đó, dẫn tới khái niệm là DOM ảo nhanh hơn DOM thật dù vẫn phải render lại DOM thật, nhưng mà render ít hơn.

Khi điều này được thực hiện, 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 tối thiểu hoạt động cập nhật trên DOM thực. Do đó, giảm hao tốn hiệu suất của việc cập nhật DOM thực.

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

Quá trình thực hiện của một cây DOM ảo và DOM thật

Các vòng tròn màu đỏ là đạ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 so với hiện tại. Sau đó, toàn bộ cây con chính sẽ được hiển thị lại để cung cấp giao diện người dùng được cập nhật. Cây cập nhật này sau đó được cập nhật hàng loạt vào DOM thực.

Tóm tắt lại

  • Thao tác DOM thường xuyên rất tốn kém và hiệu suất nặng.
  • Khi thay đổi trạng thái xảy ra, DOM ảo được cập nhật và phiên bản trước đó và phiên bản hiện tại của DOM ảo được so sánh. Điều này được gọi là “diffing”.
  • Sau đó, DOM ảo sẽ gửi một bản cập nhật hàng loạt đến DOM thực để cập nhật giao diện người dùng.
  • React sử dụng DOM ảo để nâng cao hiệu suất của nó.
  • Nó sử dụng những gì có thể quan sát được để phát hiện những thay đổi trạng thái và chống đỡ.
  • React sử dụng một thuật toán diffing hiệu quả để so sánh các phiên bản của DOM ảo.
  • Sau đó, nó đảm bảo rằng các bản cập nhật theo đợt được gửi đến DOM thực để sơn lại hoặc kết xuất lại giao diện người dùng.

Tham khảo thêm: Những câu hỏi cơ bản khi tham gia phỏng vấn

Tham khảo thêm: Video tạo sidebar trong React bằng typescript và styled-component

1 thought on “React Virtual DOM tìm hiểu về chúng nào”

Leave a Comment