React是如何拆分DOM更新与浏览器绘制两个阶段的？

你梳理的React任务执行顺序是完全正确的，这个问题的核心本质和浏览器的事件循环渲染机制直接相关。

首先先解释你感知到「手动改DOM即时生效」的误区：
你直接执行titleRef.current.innerText = 'Hello'这类原生DOM操作时，看起来改动即时显示，不是因为DOM更新和绘制是同一个步骤，只是因为你执行完DOM操作后，当前JS执行栈立刻清空了，浏览器马上触发了后续的渲染流程，两者的时间间隔短到你肉眼无法感知。你可以做个简单测试：改完DOM后加一段死循环阻塞JS线程3秒，你会发现这3秒内屏幕上还是旧内容，直到JS线程释放后，浏览器才会把最新的DOM内容绘制出来，这就证明两个阶段本身就是独立的。

React能明确拆分这两个阶段，核心是利用了浏览器的事件循环执行规则：浏览器的重排/绘制操作，只会在当前一轮事件循环的所有同步任务、微任务全部执行完毕后才会触发，React就是在浏览器触发绘制前，把所有DOM相关操作集中处理完，实现了两个阶段的拆分，具体流程是：

• 状态更新触发后，React先执行render、reconcile逻辑，这一步全程在内存中运行，只会计算出需要变更的DOM操作列表，不会碰真实DOM
• reconcile结束后，React同步执行所有攒好的DOM更新操作，这一步走完真实DOM已经是最新状态了，此时你读取DOM的布局属性（比如offsetWidth、getBoundingClientRect）已经能拿到最新值，但浏览器还没把新内容渲染到屏幕上
• 接下来React同步调用所有useLayoutEffect回调，如果你在这个钩子中修改DOM，React会立刻处理对应的DOM变更，还是在浏览器绘制前完成，不会出现中间态的闪烁
• 等上面所有逻辑全部执行完，React才会释放主线程控制权，浏览器此时才会执行重排、重绘、合成的渲染流水线，把最新的DOM内容绘制到屏幕上，绘制完成后React才会调用普通的useEffect回调

这种设计最大的好处是可以把多次DOM更新合并成一次批量处理，避免频繁触发浏览器重排重绘，大幅提升渲染性能。

内容的提问来源于stack exchange，提问作者vijayst