虚拟 DOM

1. 先说说为什么需要虚拟 DOM？

直接操作真实 DOM 的成本非常高。会造成：

1. 重排（Reflow）：元素几何尺寸、布局改变，浏览器都需重新计算页面布局。这是一个极其消耗资源过程。
2. 重绘（Repaint）：布局计算完成后，浏览器需要将新的像素绘制到屏幕上。

频繁且大规模的进行重排和重绘，会导致 UI 线程长时间被占用，页面卡顿，影响用户体验。

为了解决这个性能问题，React 引入了虚拟 DOM 的概念。

2. 什么是虚拟 DOM？

虚拟 DOM 实际上就是一个普通的 js 对象，它是对真实 DOM 的一种抽象表示。

当组件状态（State）变化时，React 会启动 Reconciliation（协调） 过程，其核心就是 Diff 算法。

3. 核心工作流（Reconciliation）

1. 触发更新：更新 State 或者 Props 变更，这些状态更新了，于是 React 就知道需要进行更新了。
2. 创建新树：React 会根据最新的状态，在内存中构建一棵新的虚拟 DOM 树。
3. 差异化比较（Diff）：将新树和旧树进行逐层比较。
4. 计算最小变更：Diff 算法找出两棵树之间的最小差异（patch）。
5. 批量更新真实的 DOM：将所有差异“打包”，一次性地、针对性地应用在真实 DOM 上。

以上，虚拟 DOM 解决了如下问题：

1. 提升应用性能。
2. 不再关心繁琐的 DOM 操作，专注于业务逻辑，开发体验提升。
3. 将虚拟 DOM 作为抽象层，不依赖于特定的渲染环境，实现了跨平台兼容性。