Skip to main content

[ReactDoc] React Hooks - 較少用到的

Hooks API Reference @ React Docs

useLayoutEffect#

useLayoutEffectuseEffect 非常相似,最大的差別在於 useLayoutEffect 會在 DOM render 完後,以同步(synchronous)的方式立刻接著執行;但 useEffect 則是以非同步的方式執行,也就是說,畫面 render 完後,瀏覽器有機會先做其他事,接著才執行 useEffect 中的函式。

一般來說,只會用在當你製作動畫,或需要測量 DOM 節點的寬高時,目的是為了避免這段期間瀏覽器的 DOM 有改變,導致誤差。

因為 useLayoutEffect 是同步的方法,一般來說,除非有必要,不然會建議使用 useEffect 來避免畫面的更新被阻塞(blocking)。