3.2.3 useLayoutEffect

React還提供了與useEffect同等地位的useLayoutEffect。useEffect和useLayoutEffect在副作用中都可獲得DOM變更后的屬性：

單擊按鈕后會打印“color layout effect red”“color effect red”。可見useEffect與useLayoutEffect都可從DOM中獲得其變更后的屬性。

從表面上看，useEffect與useLayoutEffect并無區別，但事實上厘清它們的區別需要從副作用的“同步”“異步”入手。3.2.2節曾介紹過useEffect的運行過程是異步進行的，即useEffect不阻礙瀏覽器的渲染；useLayoutEffect與useEffect的區別是useLayoutEffect的運行過程是“同步”的，其阻礙瀏覽器的渲染。

簡而言之，useEffect發生在瀏覽器reflow/repaint操作之后，如果某些effect是從DOM中獲得值的，如獲取clientHeight、clientWidth，并需要對DOM進行變更，則可以改用useLayoutEffect，使得這些操作在reflow/repaint操作之前完成，這樣有機會避免瀏覽器花費大量成本，多次進行reflow/repaint操作。以一個例子來說明：

分別在useEffect、requestAnimationFrame、useLayoutEffect和render過程中進行調試打印，以觀察它們的時序。可以看到，當渲染App后將按如下順序打印：render、layoutEffect、requestAnimationFrame、effect。由此可知，useLayoutEffect的副作用都在“繪制”階段前，useEffect的副作用都在“繪制”階段后。通過瀏覽器調試工具觀察task的執行，如圖3-2所示。

在圖3-2中，①執行了useLayoutEffectCallback，為useLayoutEffect的副作用；②為瀏覽器的Paint流程；在Paint流程后，③的執行函數為useEffectCallBack，執行了useEffect的副作用。

圖3-2 useLayoutEffectCallback與useEffectCallBack的執行順序