请阐述 React 16 中 reconciliation 阶段和 commit 阶段各自承担的任务是什么？

回答思路

1. 【回答框架 1】在 React 16 中，reconciliation 阶段（协调阶段）的主要工作是计算出组件树中哪些部分需要更新。它通过对比新旧虚拟 DOM 树，找出差异，并生成一个副作用列表（effect list），这个列表描述了需要执行的具体 DOM 操作。这个阶段是可中断的，React 可以将其拆分成多个小任务，以便在浏览器空闲时执行，从而提高响应性。
2. 【回答框架 2】commit 阶段则是将 reconciliation 阶段计算出的变更一次性应用到真实的 DOM 上。这个阶段是同步且不可中断的，React 会依次执行副作用列表中的操作，包括插入、更新、删除 DOM 节点，以及调用生命周期方法（如 componentDidMount、componentDidUpdate 等）。
3. 【回答框架 3】两个阶段的分工使得 React 能够将复杂的 UI 更新过程分解为两个清晰的步骤：先计算“该怎么变”，再执行“变”。这种设计不仅提高了性能，也为后续的并发模式（如 Concurrent Mode）奠定了基础。
4. 【回答框架 4】需要注意的是，reconciliation 阶段并不直接操作 DOM，它只是生成更新计划；而 commit 阶段直接修改 DOM，因此在这个阶段不能被打断，以保证 UI 的一致性。
5. 【关键点 1】reconciliation 阶段负责计算更新差异并生成 effect list，是可中断的。
6. 【关键点 2】commit 阶段负责将变更应用到 DOM 并调用相关生命周期方法，是同步不可中断的。
7. 【关键点 3】两个阶段的分工是 React 16 渲染性能优化的核心机制。
8. 【易错点 1】容易混淆：reconciliation 阶段并不直接操作 DOM。
9. 【易错点 2】错误地认为 commit 阶段也可以被中断。
10. 【易错点 3】忽略了生命周期方法的调用时机与阶段的关系。