執(zhí)行過程
- 你需要通過 變更 State、父元素觸發(fā) 重新渲染等某種方式造成 re-render
- 當(dāng)前組件就會調(diào)用 render 函數(shù)
- React 會執(zhí)行 useLayoutEffect，直到該函數(shù)邏輯執(zhí)行完畢
- 虛擬dom元素真實地更新到屏幕上
- 執(zhí)行 useEffect 表示更新完畢
useLayoutEffect
在 render 函數(shù)之后 繪制元素到屏幕上之前 這段時間內(nèi)同步執(zhí)行的函數(shù)
useEffect
在 元素繪制到瀏覽器屏幕上之后異步執(zhí)行
Tip
所以我們就能知道為什么在使用 useEffect 執(zhí)行一些布局變化的時候會產(chǎn)生突兀感挤安，而useLayoutEffect能夠避免這類情況發(fā)生沾乘，因為useLayoutEffect是在瀏覽器重繪之前執(zhí)行且是同步氏仗，相當(dāng)于是有機會對 dom 樹再做一次變更的矫夷，而useEffect則是視覺上的再次重繪
但是我至今也沒有搜索到 某次 DOM 元素變更產(chǎn)生重繪股冗，瀏覽器有相關(guān)api可以在重繪絕對完成之后進行執(zhí)行的回調(diào)或相關(guān)監(jiān)聽方式霹陡，還妄有了解相關(guān)api的同學(xué)可以在此處留言告知我，萬分感謝·Thanks?(?ω?)?`...
