请描述在 React 应用中，当 DOM 结构发生变化后，React 在内部会经历哪些阶段和变化？请从虚拟 DOM 的更新流程角度展开。
考察说明
考查对 React 内部更新机制（从状态变化到 DOM 渲染）的深入理解。
回答思路
- 【回答框架 1】当 DOM 结构发生时，React 首先会通过 setState 或 useState 触发更新。React 会创建一个更新任务并进入调度阶段，根据任务的优先级（如同步或异步）决定何时执行。
- 【回答框架 2】在渲染阶段，React 会从触发更新的组件开始，递归调用函数组件或类组件的 render 方法，生成新的虚拟 DOM（React Element）树，并与之前的虚拟 DOM 树进行对比（Reconciliation，即协调）。
- 【回答框架 3】对比过程中，React 使用 diff 算法，通过同层比较、key 属性优化等策略，最小化需要变更的节点。对于组件类型的差异、props 的变化等，会决定是更新组件、复用组件还是卸载组件。
- 【回答框架 4】对于需要更新的部分，React 会进入 commit 阶段。在此之前，React 会收集副作用（如 DOM 操作、生命周期调用、useEffect 回调）。commit 阶段分为 before mutation、mutation、layout 等子阶段，依次执行 DOM 更新、调用生命周期方法等。
- 【回答框架 5】对于函数组件，React 还会处理 Hooks 的变化，如 useState 的 state 更新、useEffect 的依赖追踪等，确保 UI 与状态同步。最后，浏览器渲染，React 完成整个更新循环。
- 【关键点 1】更新触发：setState 或 useState 等会触发更新。
- 【关键点 2】调度与渲染：React 采用调度器决定更新时机，渲染阶段生成新的虚拟 DOM 树。
- 【关键点 3】协调与 diff：通过 diff 算法比较新旧虚拟 DOM，找出最小变更。
- 【关键点 4】commit 阶段：执行 DOM 操作和生命周期副作用。
- 【易错点 1】误以为 DOM 结构变化直接操作真实 DOM，实际上 React 先操作虚拟 DOM 再批量更新真实 DOM。
- 【易错点 2】忽略 key 的作用，可能阻碍复用和导致不必要的重渲染。