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