useEffect 介紹

如果你熟悉 React class 的生命周期函數(shù)，你可以把 useEffect Hook 看做

componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合。

• componentDidMount 組件掛載
• componentDidUpdate 組件更新
• componentWillUnmount 組件將要摧毀

使用方法

情況一：

useEffect需要傳遞兩個(gè)參數(shù)，第一個(gè)參數(shù)是邏輯處理函數(shù)，第二個(gè)參數(shù)是一個(gè)數(shù)組

代碼如下：

useEffect(() => {
/** 執(zhí)行邏輯 */
},[])

情況二：

• 第二個(gè)參數(shù)存放變量，當(dāng)數(shù)組存放變量發(fā)生改變時(shí)，第一個(gè)參數(shù)，邏輯處理函數(shù)將會(huì)被執(zhí)行
• 第二個(gè)參數(shù)可以不傳，不會(huì)報(bào)錯(cuò)，但瀏覽器會(huì)無(wú)限循環(huán)執(zhí)行邏輯處理函數(shù)。

代碼如下：

useEffect(() => {
/** 執(zhí)行邏輯 */
})

情況三：

第二個(gè)參數(shù)如果只傳一個(gè)空數(shù)組，邏輯處理函數(shù)里面的邏輯只會(huì)在組件掛載時(shí)執(zhí)行一次 ，等價(jià)于 componentDidMount

代碼如下：

useEffect(() => {
/** 執(zhí)行邏輯 */
},[])

情況四：

• 第二個(gè)參數(shù)如果不為空數(shù)組,依賴(lài)指定參數(shù)觸發(fā)使用
• 邏輯處理函數(shù)會(huì)在組件掛載時(shí)執(zhí)行一次和(a或者b變量在棧中的值發(fā)生改變時(shí)執(zhí)行一次) 這是不是相當(dāng)于componentDidMount 和componentDidUpdate 的結(jié)合

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 執(zhí)行邏輯 */
},[a,b])

情況五：

• useEffect第一個(gè)參數(shù)可以返回一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)將會(huì)在組件被摧毀之前和再一次觸發(fā)更新時(shí)，將之前的副作用清除掉。這就相當(dāng)于componentWillUnmount。
• useEffect去除副作用。我們可能會(huì)在組件即將被掛載的時(shí)候創(chuàng)建一些不斷循環(huán)的訂閱（計(jì)時(shí)器，或者遞歸循環(huán)）。在組件被摧毀之前，或者依賴(lài)數(shù)組的元素更新后，應(yīng)該將這些訂閱也給摧毀掉。

比如以下的情況（沒(méi)有去除計(jì)時(shí)器，增大不必要的開(kāi)銷(xiāo)和代碼風(fēng)險(xiǎn)）

const [time, setTime] = useState(0)
useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
},[])

處理在組件被摧毀前去除計(jì)時(shí)器

const [time, setTime] = useState(0)
useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
	return () => {
   		clearInterval(InterVal )
   	}
},[])

特殊情況處理

useEffect監(jiān)測(cè)不到依賴(lài)數(shù)組元素的變化。

只有一種可能，依賴(lài)數(shù)組元素的地址的值根本就沒(méi)變，

原因：因?yàn)閏hangeA沒(méi)有真正的改變a在棧中的值（地址的值），只是改變了a在堆中的值。

useEffect監(jiān)測(cè)不到堆中值得變化，所有引用類(lèi)型數(shù)據(jù)都應(yīng)該注意這一點(diǎn)。

代碼示例:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	old.b = 'yx'
	return old
	})
}
useEffect(() => {
/** 當(dāng)組件掛載時(shí)執(zhí)行一次changeA */
changeA ()
},[])
/**當(dāng)changeA執(zhí)行卻沒(méi)有打印 a*/
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])

解決的辦法

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
	setA((old) => {
	const newA = {...old}
	newA .b = 'yx'
	return newA 
	})
}
useEffect(() => {
/** 當(dāng)組件掛載時(shí)執(zhí)行一次changeA */
changeA ()
},[])
/**當(dāng)changeA執(zhí)行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 執(zhí)行邏輯 */
console.log(a)
},[a])

到此這篇關(guān)于React useEffect的理解與使用的文章就介紹到這了,更多相關(guān)React useEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論