React 18 源代码 14 commitLayoutEffe

commitMutationEffectsOnFiber 虽然已经将 DOM 插入，不过当前 Javascript 阶段尚未结束，浏览器尚未得到时机执行 layout 或者 paint。请参考 Rendering Performance

image.png

如上图，目前尚处在黄色的区域。

执行完 commitMutationEffectsOnFiber 后，会执行 commitLayoutEffects，这个阶段，会执行 recursivelyTraverseLayoutEffects，递归遍历所有的 child 和 sibling，执行 commitLayoutEffectOnFiber

Screen Shot 2022-09-19 at 14.29.11.png

这个过程是一个深度优先遍历，会遍历所有的 element，对于原生的 div, span 来说，不会有 useLayoutEffect，对于 FunctionComponent(0), ForwardRef(11), SimpleMemoComponent(15) 来说，执行updateQueue 中所有的 effect，执行 useLayoutEffect 中的回调，返回值也存储在 effect.destroy 中。