useEffect和useLayoutEffect區別
useEffect
基本上90%的情況下,都應該用這個,這個是在render結束后,你的callback函數執行,但是不會block browser painting,算是某種異步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render結束后就運行,useEffect在大部分場景下都比class的方式性能更好.
useLayoutEffect
這個是用在處理DOM的時候,當你的useEffect里面的操作需要處理DOM,並且會改變頁面的樣式,就需要用這個,否則可能會出現出現閃屏問題, useLayoutEffect里面的callback函數會在DOM更新完成后立即執行,但是會在瀏覽器進行任何繪制之前運行完成,阻塞了瀏覽器的繪制.
可能講的不是很清楚,看個例子吧
import React, { useEffect, useLayoutEffect, useRef } from "react"; import TweenMax from "gsap/TweenMax"; import './index.less'; const Animate = () => { const REl = useRef(null); useEffect(() => { /*下面這段代碼的意思是當組件加載完成后,在0秒的時間內,將方塊的橫坐標位置移到600px的位置*/ TweenMax.to(REl.current, 0, {x: 600}) }, []); return ( <div className='animate'> <div ref={REl} className="square">square</div> </div> ); }; export default Animate; 
gifhome_1536x760_5s.gif
可以清楚的看到有一個一閃而過的方塊.
改成useLayoutEffect試試
gifhome_1536x760_5s (1).gif
可以看出,每次刷新,頁面基本沒變化
I believe your apartment is on fire
作者：LastStranger
鏈接：https://www.jianshu.com/p/412c874c5add
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。