reactjs - 阅读布局时， `useLayoutEffect` 比 `useEffect` 更可取吗？

Question

关于 useLayoutEffect 的区别之一对比 useEffect是useLayoutEffect将在 DOM 突变之后和浏览器绘制阶段之前同步触发。 (Reference)
但是，我遇到了一些文章，它们似乎都建议使用 useLayoutEffect用于阅读布局。
React docs:

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

Kent C.Dodds :

useLayoutEffect: If you need to mutate the DOM and/or do need to perform measurements.

Ohans Emmanuel:

Where possible, choose the useEffect Hook for cases where you want to be unobtrusive in the dealings of the browser paint process. In the real world, this is usually most times! Well, except when you’re reading layout from the DOM or doing something DOM-related that needs to be painted ASAP.

据我了解，到 useEffect被触发，浏览器已经通过了布局和绘制阶段，所以读取 useEffect 中的布局应该完全没问题。
所以我的问题:是 useLayoutEffect优于 useEffect阅读布局时，如果是，为什么？假设我只阅读了布局，并没有在效果中执行任何额外的状态更改。

Answer 1

下图总是可以帮助我可视化钩子(Hook)的流程，也可以让你澄清为什么 useLayoutEffect推荐超过 useEffect用于基于 DOM 的操作(您的目标是在当前浏览器绘制之前可以更新的内容)

链接到图表 - https://github.com/donavon/hook-flow