React 的工作原理是什么？Virtual DOM 是如何工作的？

1. 核心工作原理

React 的核心思想是：当应用状态（State）发生变化时，框架自动计算出界面需要更新的最小范围，然后只更新那一部分真实 DOM。这套机制由 Virtual DOM（虚拟 DOM）和协调算法（Reconciliation）共同完成。

2. Virtual DOM 的工作流程

• 初始渲染：React 根据 JSX 组件树，在内存中构建一棵轻量级的 JavaScript 对象树（即 Virtual DOM 树）
• 状态变化触发更新：当组件状态或属性（Props）发生变化时，React 基于新数据生成一棵新的 Virtual DOM 树
• Diff 比对（协调过程）：React 将新树与上一轮渲染的树进行比对，找出差异点。该算法时间复杂度为 O(n)，通过元素类型、key 属性和位置信息进行启发式比对，避免全量比较
• 提交阶段（Commit Phase）：React 将比对出的差异一次性批量更新到真实 DOM 中，只修改发生变化的具体节点，未变化的部分保持不变

3. Fiber 架构的改进

React 16 引入的 Fiber 架构将协调过程重构为可中断的链表结构，使渲染过程可以被优先级更高的任务（如用户输入）打断，从而提升交互响应速度。React 18/19 在此基础上进一步增强了并发渲染能力，支持时间切片（Time Slicing）和过渡更新（Transitions）。