React回调注册与执行顺序机制疑问及实例解析

问题1：useLayoutEffect和useEffect的注册与执行时机 #

组件函数确实是逐行执行的，但useLayoutEffect和useEffect的注册时机是在组件函数执行到对应钩子语句时，而非等到return之后。React会在此时把回调函数和依赖项分别加入到同步执行队列（useLayoutEffect）和异步执行队列（useEffect）。

它们的执行时机则是在整个节点树构建完成（虚拟DOM转为真实DOM并挂载到页面）之后：

• 先同步执行所有useLayoutEffect回调，执行顺序是子组件优先于父组件（因为子组件的DOM先完成挂载）
• 等浏览器完成页面绘制后，再异步执行所有useEffect回调，顺序同样是子组件先、父组件后

问题2：父组件（App）的ref回调在子组件useLayoutEffect之后执行的原因 #

React在挂载阶段的DOM处理与回调执行有严格的顺序：

1. 先执行父组件函数生成虚拟DOM，再执行子组件函数生成虚拟DOM
2. 先挂载子组件的真实DOM到页面，随后触发子组件的ref回调（如果有），接着执行子组件的useLayoutEffect
3. 待子组件DOM完全插入父组件DOM后，父组件的真实DOM才算完成挂载，此时才会触发父组件的ref回调
4. 最后执行父组件的useLayoutEffect

简单来说，子组件的DOM挂载和useLayoutEffect执行是父组件DOM完成挂载的前置步骤，因此父组件的ref回调会滞后于子组件的useLayoutEffect。

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