Virtual DOM (VDOM) 是一个轻量级的 JavaScript 对象树，用来描述 UI 应该看起来什么样。它是一个纯粹的内存表示——不是真实的浏览器 DOM。React 使用它是因为直接操作真实 DOM 很慢，而且在每次状态改变时手动操作容易出错。
工作原理
当状态改变时，React 不会立即触及页面。相反，它会：
- 从你的组件构建一棵新的虚拟树。
function Counter() {
const [n, setN] = useState(0);
// Each click produces a NEW virtual tree describing <button>{n}</button>.
// React compares old vs new and updates ONLY the text node that changed,
// not the whole button or the page.
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
因此你可以声明式地编写代码（"给定这个状态，UI 看起来是这样"），React 会为你计算出必要的命令式 DOM 操作。
document.querySelector + 修改更容易理解。