Virtual DOM là gì và reconciliation hoạt động ra sao?

Virtual DOM (VDOM): bản mô tả UI bằng object JS nhẹ, phản chiếu cây DOM thật. Thao tác trên object rẻ hơn nhiều so với thao tác trực tiếp trên DOM thật.

Khi state/props đổi, React:
1. Tạo cây VDOM mới cho lần render.
2. Reconciliation / diffing: so cây mới với cây cũ để tìm khác biệt.
3. Commit: chỉ áp những thay đổi tối thiểu vào DOM thật theo lô (batch).

React dùng vài heuristic để diff nhanh (O(n) thay vì O(n³)):
- Element khác loại (<div> → <span>) → thay cả cây con, không cố khớp.
- Cùng loại → giữ node, chỉ cập nhật attribute/con đổi.
- Danh sách con → dựa vào key để nhận diện phần tử qua các lần render (vì sao key quan trọng).

Mục đích không phải "nhanh hơn DOM" tuyệt đối, mà là mô hình khai báo: bạn mô tả UI mong muốn, React lo cách cập nhật hiệu quả.