componentDidUpdate DOM读取与屏幕更新不一致及useLayoutEffect时序疑问

这是个非常典型的场景，刚好能帮我们把React更新流程和浏览器的渲染机制串起来讲清楚。

核心原因：React DOM更新是同步的，但浏览器渲染是异步批量的 #

我们一步步拆解你遇到的情况：

1. 当setState触发后，React会同步完成这些操作：
   • 更新组件state（从5变成10）
   • 执行render生成新的虚拟DOM
   • 将虚拟DOM的变化映射到真实DOM（也就是把random_test_dummy的height属性改成10px）
2. 紧接着，React会同步触发componentDidUpdate钩子。这时候真实DOM的height已经是10px了，所以你用document.getElementById(...).clientHeight能读到最新值——这部分完全符合你的预期。

问题出在浏览器的渲染机制上：浏览器不会在DOM属性变化后立刻重绘屏幕，而是把所有渲染相关的任务（重排、重绘）放到一个异步队列里，只有当当前的JS执行栈完全清空后，才会去处理这个队列里的任务。

为什么alert会导致屏幕不更新？ #

alert()是一个阻塞式API：它会暂停所有JS代码的执行，同时也会阻止浏览器处理渲染队列。当你在componentDidUpdate里调用alert时：

• 真实DOM已经被改成10px了，但浏览器还没来得及重绘
• alert卡住了JS执行栈，渲染队列里的任务一直得不到执行
• 直到你关闭alert，JS执行栈清空，浏览器才会立刻执行重绘，屏幕上的高度才会变成10px

为什么加断点就正常？ #

当你在console.log处加断点时，浏览器会暂停JS执行。这时候浏览器处于空闲状态，会自动去处理渲染队列里的任务——所以你能在屏幕上看到DOM更新后的效果。当你继续执行代码时，执行栈最终还是会清空，后续的渲染也能正常完成。

关于useLayoutEffect的补充 #

你提到的useLayoutEffect，它的执行时机确实和componentDidMount/componentDidUpdate一致：都是在React更新DOM之后，浏览器渲染之前同步执行。如果在useLayoutEffect里调用alert，也会出现同样的“DOM已更新但屏幕没变化”的情况——因为它同样会阻塞JS执行，延迟浏览器的渲染。

总结这个同步阶段的运作逻辑 #

• React的DOM更新是同步立即完成的，更新后真实DOM的属性已经是最新值
• 生命周期钩子（componentDidUpdate、useLayoutEffect）在DOM更新后同步执行，但此时浏览器还没开始渲染
• 浏览器的渲染是异步批量处理的，必须等当前JS执行栈清空后才会进行
• 任何阻塞JS执行的操作（alert、长耗时同步代码）都会延迟渲染，导致“DOM已更新但屏幕未变化”的视觉差异

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