React cập nhật lại DOM như thế nào ?

Nếu bạn đã làm việc với React thì chắc hẳn bạn đã nghe nói đến thuật ngữ Virtual Dom, trong bài viết ngày hôm nay mình sẽ giải thích cơ bản về Virtaul Dom là gì và cách React ứng dụng nó để tăng tốc độ cập nhật các phần tử trong Dom thật.

1.Dom vs Virtual Dom

DOM
Dom (Document Object Model) về cơ bản là đại diện của giao diện người dùng của ứng dụng của bạn, về cơ bản thì JS sẽ tương tác với Dom để thay đổi giao diện người dùng (Html+Css), Dom giúp JS thay đổi giao diện người dùng.
=> Quan điểm sai lầm thứ nhất : Việc đọc và ghi vào DOM rất chậm.
Điều này là không chính xác, DOM rất nhanh việc bạn thêm hay xóa một node trong DOM không mất nhiều thời gian khi bạn thêm một properties vào một object , khi bạn tương tác với DOM tồn nhiều thời gian không phải do bản thân của DOM mà do trình duyệt mỗi lần nhận thấy sự thay đổi của DOM sẽ tiến hành tổ chức lại bố cục, tính toán lại CSS...đây là những công việc cần nhiều thời gian do vậy có thể nói một cách miễn cưỡng làm việc với Dom rất chậm do khi một phần tử trong Dom cập nhật nó sẽ kéo theo toàn bộ phần tử con của phần tử đó cập nhật lại theo, do đó có càng nhiều thành phần trong UI sẽ càng có nhiều phần tử phải cập nhật dẫn đến chậm.


VIRTUAL DOM
Virtual Dom giống với Dom trong thực tế, nó là một Tree Node liệt kê tất cả các thành phần trên UI dưới dạng Node, các thuộc tính và nội dung của chúng dưới dạng đối tượng và thuộc tính.

Virtual Dom tương tự như Dom nhưng nó yếu hơn, hiểu đơn giản thì Dom là cả ngôi nhà thì Virtual Dom giống như một bản thiết kế của ngôi nhà đó, chúng ta chỉ cần xem bản thiết kế để biết các thành phần và số đo của ngôi nhà chứ không cần xem xét đo đạc trực tiếp từng thành phần của ngôi nhà.
Trong react mỗi khi thay đổi state hoặc props của component thì trong thời gian hàm render chạy toàn bộ Dom ảo sẽ được cập nhật lại thay vì Dom thực (mỗi lần

2 Tại sao Virtual Dom nhanh ?

Mỗi khi có một thành phần mới được thêm vào UI nó sẽ được biểu diễn vào trong Dom ảo (dạng cấu trúc hình cây) như một node, bất cứ thành phần nào được cập nhật vào UI thì toàn bộ Dom ảo sẽ được render lại (một phiên bản Dom ảo mới được tạo ra trong hàm render) và React sẽ tiến hành so sánh phiên bản Dom ảo mới nhất và phiên bản Dom ảo liền trước.

=> React giữ 2 phiên bản của Dom ảo rồi thực hiện tính toán cách thức cập nhật tốt nhất để tiến hành cập nhật vào Dom thực, điều này sẽ tối ưu hóa quá trình cập nhật của Dom thực, tránh cập nhật không cần thiết.

Trong UI có nhiều thành phần và mỗi thành phần có những trạng thái, React sẽ lắng nghe sự thay đổi ở các trạng thái trong nhiều component, mỗi khi state thay đổi React sẽ tiến hành render lại Dom ảo và so sánh nó với phiên bản liền trước của nó để tính toán sao cho tối ưu cho quá trình cập nhật Dom thực quá trình này gọi là 'diffing'.

3 Hàm render()

Hàm render chính là nơi mà Tree Of React Element được tạo ra, bất cứ khi nào props hoặc state của component thay đổi thì một Tree Of React Element sẽ được tạo ra, chú ý rằng render không được gọi để cập nhật ngay lập tức UI với Dom thực, tất nhiều không phải bất cứ khi nào props hoặc state thay đổi thì hàm render cũng được invoked chúng ta có thể ngăn chặn nó bằng shouldComponentUpdate, PureComponent, React.memo..

=> Chú ý rằng cách thức cập nhật của React cho Dom thực theo cơ chế hàng loạt, tức là React không ngay lập tức cập nhật Dom thực mà nó cập nhật theo từng đợt nhất định để tối ưu về mặt hiệu năng, hiểu đơn giản nếu một component có nhiều state, khi mội setState được invoked react sẽ cập nhật ngay lập tức vào UI (Dom thực) mà nó sẽ đợi các hàm setState chạy hết để cập nhật UI cùng một thể => Điều này dẫn đến một số trường hợp setState là bất đồng bộ.