Leif Le
October 1, 2025
25 min read
How React re-render? React reconciliation
ReactJS
React provides a declarative API so that you don’t have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React’s “diffing” algorithm so that component updates are predictable while being fast enough for high-performance apps.
a. Virtual DOM Tree
Nếu đã từng làm việc với ReactJS hoặc VueJS thì chắc hẳn bạn đã từng nghê đến khái niệm Virtual DOM. Thực tế thì Virtual DOM là một kiểu Object trong Javascript mà React sử dụng để biểu diễn DOM thật. Cụ thể thì bạn có thể nhìn hình dưới đây:
Như bạn thấy ở từng phần:
- The App: là thứ mà chúng ta sẽ nhìn thấy ở trên trình duyệt WEB.
- Real DOM: là phần DOM thật mà chúng ta có thể nhìn thấy bằng cách inpect trong dev tool trên trình duyệt hoặc view-source của trang web.
- DOM Tree: Là biểu diễn lại DOM của chúng ta dưới dạng "cây".
- VDOM: hay chính là phần Virtual DOM của chúng ta được biểu diễn dưới dạng là Javascript Object.